微信网页全屏播放自动播放问题

video视屏播放在微信网页中的全屏自动播放一直是个很头疼的问提

1.自动播放问题

Android中是无法自动播放了，只能做用户引导页喽，微信app内核webkit版本低不支持

IOS中加autoplay并且在onload事件之后调用一次play()

<video id="Movies" src="./cdnfile/in.mp4" x5-playsinline="" x5-video-player-fullscreen="true"
       x5-video-player-type="h5" playsinline="true" webkit-playsinline="webkit-playsinline" webkit-playsinline="true" preload="auto" autoplay onload="onReady()"
       onended="completeVideo()"></video>

function onReady() {
    Movies.play();
}

如果还是无法自动播放，

（方法一）引用微信jssdk，在wx.ready()回调函数中再调用一次video的play()方法，代码如下

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>

wx.ready(function () {
        Movies.play()
 })

（方法二）设置 WeixinJSBridgeReady 自动播放

HTML

<video src="xxx.mp4" autoplay x5-video-player-type="h5" />

document.addEventListener(“WeixinJSBridgeReady”, function() {
document.getElementById(‘video’).play();
}, false);

2.全屏问题，去除播放控件

使用h5同层播放方可解决

H5同层播放器接入规范

x5-video-player-type 启用Ｈ5同层播放器

通过video属性“x5-video-player-type”声明启用同层H5播放器

x5-video-player-type支持的值类型：h5

示例：

注：这个属性需要在播放前设置好，播放之后设置无效，下面的’x5-video-player-fullscreen’也是一样

x5-video-player-fullscreen全屏方式

视频播放时将会进入到全屏模式

如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块）

注：声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现

需要监听窗口大小变化(resize)实现全屏

window.onresize = function(){

test_video.style.width = window.innerWidth + "px";

test_video.style.height = window.innerHeight + "px";

}

注: : 1. 为了让视频真正铺满全屏,可以适当让video的显示区域大于视口区域,这样在显示时在视口外的部截掉后,不会出四周黑边的情况

x5-video-orientation 控制横竖屏

功能：声明播放器支持的方向

可选值： landscape 横屏, portraint竖屏

默认值：portraint

e.g: http://res.imtt.qq.com/qqbrowser/js/test_video_orientation_attr.html

横屏

竖屏

跟随手机自动旋转

注: 此属性只在声明了x5-video-player-type=”h5”情况下生效

x5videoenterfullscreen进入全屏通知

支持版本: TBS中从>=036900开始支持，QB中是>=7.2开始支持

x5videoenterfullscreen: 表示播放器进入全屏状态

示例：

通过JS监听事件

myVideo.addEventListener("x5videoenterfullscreen", function(){

alert("player enterfullscreen");

})

x5videoexitfullscreen退出全屏通知

x5videoexitfullscreen: 表示播放器退出了全屏状态

使用方法与x5videoenterfullscreen类似

使用同层播放器的一些建议

1. 监听resize 事件实现自适应视口大小变化，视频播放时会调整视口大小

2. 在视频播放期间的交互，弹框，字幕在视频视频区域中，不要在视频区域外

3. 对于直播类全屏视频，最好不要在最顶部放交互性元素

交互性视频实现建议

允许视频区域(video元素)之上的操作

1. 对于需要全屏交互的,可以将video区域设置为视口大小>

视频显示位置控制

默认视频在指定区域的居中显示，可以通过css object-position 属性控制视频(左上角) 显示位置

TBS同层播放参考文档 http://x5.tencent.com/tbs/guide/video.html

微信网页全屏播放自动播放问题

H5同层播放器接入规范

猜你喜欢