关于H5 video在移动端播放问题

常见问题和解决方案：

1、video添加自动播放属性autoplay，无法正常播放视频。

解决方案：

需要在video标签中添加muted属性<video muted src="" autoplay loop></video>但是设置muted之后，它规定视频的音频输出时应该被静音。

2、在一些安卓浏览器播放视频的时候，不能在H5页面播放视频，系统会自动接管视频。

解决方案：

添加内联播放属性；
如果需要在H5页面内播放视频，需要在video标签加上webkit-playsinline，在一些ios上还需要加上playsinline。
可以同时加上这两个属性：
<video muted src="" autoplay webkit-playsinline playsinline ></video>
有些app还需要支持内联播放的模式，这时候需要加上：
webview.allowsInlineMediaPlayback = YES;

3、可能是视频被接管的原因，移动端播放视频有时候无法直接播放或有卡顿的现象。

解决方案：

启用H5内核H5播放器;
在video标签中添加启动H5播放的属性：x5-video-player-type="h5"
如：<video muted src="" autoplay loop x5-video-player-type="h5"></video>

4、video无法铺满整个屏幕

解决方案：

video标签加上 style="width= 100%; height=100%; object-fit: fill"；

5、移动端①播放时，点击暂停并出现蒙层；②暂停时，点击播放并且蒙层消失；

①创建一个蒙层的div，使用video的方法：播放play()、暂停pause()；
②使用事件委托也是可以实现的；

蒙层制作可以参考fixed布局应用场景-遮罩层

参考思路和代码（样式不写啦）：

 <!-- video -->
        <div class="video-wrap">
            <video id="video" class="myVideo" src="" poster="" width="100%" height="100%" object-fit:fill
                webkit-playsinline playsinline x5-video-player-type="h5" x5-video-orientation="portraint">
                Your browser does not support HTML5 video.
            </video>
        </div>
        <!-- like_icon -->
        <div class="likeIcon-wrap">
            <div class="like-icon" data-key="on"></div>
            <div class="like-num"></div>
        </div>
        <!-- mask -->
        <div class="video-mask"></div>
        <!-- pause_icon -->
        <div class="video-pause"></div>

$(document).ready(function () {
    // video play
    $('.video-mask').on('click', function () {
        maskCancel();
        $('#video').get(0).play(); //play不是jQuery函数，而是DOM函数，需要通过DOM来调用play
    })
    // video pause
    $('.video-wrap').on('click', function () {
        $('#video').get(0).pause();
        maskShow();
    })
    // 监听视频播放，结束时出现暂停按钮和蒙层
    $('#video').on('ended', function () {
        maskShow();
    })
})

var  video_mask = $(".video-mask"),
       video_pause = $(".video-pause"),
       video = $("#video");
//video-mask/video-pause show
function maskShow() {
    video_mask.css('display', 'block');
    video_pause.css('display', 'block');
}
//video-mask/video-pause cancel
function maskCancel() {
    video_mask.css('display', 'none');
    video_pause.css('display', 'none');
}

6、监听视频是否结束

主要用到的是监听的 ended事件；

//js写法
var video=document.getElementById("video");
video.addEventListener('ended', function () {
     console.log('play over!');;
      }, false);
//jQuery写法
$('#video').on('ended',function(){
     console.log('play over!');
})

注意：addEventListener是js的监听事件，如果在jQuery中这样使用是会出错的，在jQuery中监听可以使用on。

7、关于jQuery使用H5视频播放事件play()、暂停事件pause()出错问题：

在js中使用document.getElementById(‘video’).play();是可以的；
但是在jQuery中使用$('#video').play()就是错误的。

原因：H5的play()/pause()都不是 jQuery函数，而是DOM函数，如果jQuery要使用play()/pause(),需要通过DOM来调用play()/pause()
如：$('#video').get(0).play()

8、关于H5中的自定义属性

H5标准规定，自定义的属性都以data-*开头,这样区分了固有属性和自定义属性，我们可以通过原生js的getAttribute()和jQuery中的attr()来获取我们自定义的属性。如：<div data-name="test">leaf</div>

总之，在这过程中遇到了很多问题，有些还没想起来，等想起来再去完善记录吧，这边简单记录一下。如果文章对你有用就点个小心心鼓励一下吧。

最后编辑于：2019.03.07 14:05:14