跳到主要内容

边看边玩-全屏/半屏

方案

实现边看边玩-全屏/半屏适配步骤:

1、启动游戏时,开发者需要调用mgtv.getWindowInfo获取容器的宽高,或者利用引擎提供的适配方案,进行游戏全屏/半屏适配。

2、在边看边玩场景中,显示放大缩小按钮,用户点击按钮后,触发全屏/半屏切换。需要接入mgtv.onWindowResize接口,监听容器大小变化,根据容器大小,动态调整游戏UI,进行适配。

测试方案及效果

测试 URL Scheme

imgotv://vippart?redirect=vodGameRoom&appid=xxxxxxxxxx&autoVideo=1&orientation=2&gameRatio=0.8&clipId=466047&vid=19684401&apptype=1&expand=1

参数说明

属性类型默认值必填说明
redirectstring-跳转页面,目前默认为vodGameRoom
appidstring-小游戏appid,小游戏的唯一id,用于获取小游戏的基本信息等
apptypestring-指定加载小游戏版本类型,不传或者0为线上版本,1为体验版,2为审核版,3为开发版,4为临时体验版,传3时必须带appversion,此字段需要由sdk透传给服务端,服务端根据类型下发对应的小游戏包
autoVideonumber-是否自动播放视频,0为不自动播放,1为自动播放
orientationnumber-屏幕方向,1为竖屏模式,2为横屏模式
gameRationumber-边看边玩容器的宽高比例,0.8-针对竖屏游戏,1.2-针对横屏游戏
clipIdstring-全屏小游戏对应打开的合集id,可以填466047
vidstring-半屏小游戏对应打开的视频id,可以填19684401
expandnumber-是否展示 放大缩小按钮,1为展示,0为不展示

把测试链接,用在线生成二维码工具,生成二维码,然后用芒果tv扫码,核对效果。

竖屏游戏

竖屏游戏需要适配竖屏模式、横屏模式:

1、竖屏模式,如图一、图二所示,点击图一放大按钮后,为图二效果;点击图二缩小按钮,为图一效果。

竖屏模式

测试链接

imgotv://vippart?redirect=vodGameRoom&appid=xxxxxxxxxx&autoVideo=1&orientation=1&gameRatio=0.8&clipId=466047&vid=19684401&apptype=1&expand=1

把测试链接,用在线生成二维码工具,生成二维码,然后用芒果tv扫码,核对效果。

2、横屏模式,如图三、图四所示,点击图三放大按钮后,为图四效果;点击图四缩小按钮,为图三效果。

横屏模式

测试链接

imgotv://vippart?redirect=vodGameRoom&appid=xxxxxxxxxx&autoVideo=1&orientation=2&gameRatio=0.8&clipId=466047&vid=19684401&apptype=1&expand=1

把测试链接,用在线生成二维码工具,生成二维码,然后用芒果tv扫码,核对效果。

横屏游戏

横屏游戏需要适配横屏模式:

1、横屏模式,点击图五上方的放大按钮,显示为图五下方的效果;点击图五下方的缩小按钮,显示为图五上方的效果。

横屏模式

测试链接

imgotv://vippart?redirect=vodGameRoom&appid=xxxxxxxxxx&autoVideo=1&orientation=2&gameRatio=1.2&clipId=466047&vid=19684401&apptype=1&expand=1

把测试链接,用在线生成二维码工具,生成二维码,然后用芒果tv扫码,核对效果。

验收标准

全屏、半屏状态,游戏UI元素不允许出现异常遮挡、缺失、布局紊乱。在边看边玩的场景中,右侧出现放大/缩小按钮,进行放大/缩小操作时,游戏显示正常。