记录video 开发中遇到的问题

开发H5直播项目遇到了很多问题，记录下来避免以后踩坑

 

这是常用属性：

x5-video-player-type="h5" //启用同层H5播放器
playsinline // 如果需要在h5页面内播放视频，需要在视频标签上加上 webkit-playsinline，在iOS10以后，需要加上playsinline,建议同时加上这两个属性
webkit-playsinline="true" // 基于webkit内核的移动端内联播放
x-webkit-airplay="true"// 用来支持Airplay的设备（如：音箱、Apple TV)播放
poster // 视频封面，如果没有，则默认为视频的第一帧
muted // 是否输出声音
preload // 预加载，默认为auto
autoplay //自动播放
controls //是否显示控制条
loop //是否循环播放
width/height // 宽/高
src //视频URL

 

一、同层播放器

在微信中video的层级是最高的,并且视频播放时将会进入到全屏模式,这也就是说无法在视频上面叠加其它元素。

但是在ios下不支持同层播放器,而微信内置浏览器除外：

      if(ua.match( /\b(?:iPad|iPod|iPhone)\b/)){
        if(ua.match(/\bMicroMessenger\/([\d.]+)/)){
          video.attr('x5-video-player-type','h5');
        }
      }else{
        video.attr('x5-video-player-type','h5');
      }

 

二、调整播放器尺寸

1：需要设置video属性 x5-video-player-fullscreen="true"。如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)。

<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>

 

2：视频播放的时候进入到全屏模式会调整视口大小，这时候需要监听窗口大小的变化来改变video尺寸来实现全屏:

window.onresize = function(){
    video.style.width = window.innerWidth + "px";
    video.style.height = window.innerHeight + "px";
}

 在ios微信内需要设置属性 poster="image.jpg"撑开，不然在全屏的过程中而且视频没加载完成的时候会出现忽大忽小的问题

 

3：并且可以通过css object-position 属性控制视频内容在指定区域的显示位置

test_video.css({
    'object-position': 'center 0rem',
});

三、视频自动播放

1：可以通过添加autoplay属性来实现打开页面视频自动播放功能：

<video autoplay><video/>

但是在有些浏览器下即使设置了autoplay依然无效，在iOS下并不支持这个属性，在iOS下必须给webview设置属性：

if ("wView" in window) {

window.wView.allowsInlineMediaPlayback = "YES"; //允许内屏播放

window.wView.mediaPlaybackRequiresUserAction = "NO"; //自动播放

} 

 

2：在IOS下微信可以判断WeixinJSBridge实现自动播放：

if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
        startPlay();
    }, false);
} else {
    document.addEventListener("WeixinJSBridgeReady", function(e){
        WeixinJSBridge.invoke('getNetworkType', {}, function(e1){
            startPlay();
        });
    }, false);
}

 

3：可调用video.play()来播放视频，但在微信下必须通过用户的真实操作来触发调用video.play()，例如触发touchend、click、doubleclick或 keydown事件等标准的事件

 

四：视频的默认播放图标

在iOS都会默认显示，不能通过js控制，但是可以通过css样式将其隐藏

video::-webkit-media-controls-start-playback-button {display: none;}

 

 

效果如下：

<video id="videoPlayer"  src="test.mp4" poster="image.jpg" width="320" height="480" playsinline="" webkit-playsinline="true" x-webkit-airplay="true"  x5-video-player-type="h5"  x5-video-player-fullscreen="true"></video>