video移动端踩坑记

最近做的项目里涉及到一个视频列表，点击播放视频，有点类似短视频APP个人主页的效果，直接使用了h5自带的video标签，没想到坑一个接一个。
首先展示下效果图：

踩坑记录：

踩坑一：视频列表中直接使用多个video标签无法达到产品的设计效果，在ios微信浏览器，即使没有设置controls属性，还是有一个非常大的播放按钮，巨丑，在华为微信浏览器里，没有设置controls属性则不显示播放按钮，只有满屏的图片，无法告诉用户这是可以播放的视频，其次如果视频数量过大，页面加载了多个video标签，网络差的情况下很容易造成卡顿，手机发烫。

ios微信浏览器效果

解决方案：
视频列表使用视频封面图片作为背景图，然后使用伪元素创建阴影层和播放按钮的效果，点击视频跳到视频详情页自动播放视频。

<div class="video-list-c">
    <ul class="flex" id="newsList">
       <li style="background-image: url('${imageRealPath}')">
            <a href="getVideoDetail?image=${imageRealPath}&videoUrl=${video_url}"> </a>
        </li>
        <li style="background-image: url('${imageRealPath}')">
            <a href="getVideoDetail?image=${imageRealPath}&videoUrl=${video_url}"> </a>
        </li>
    </ul>
</div>

视频列表样式：

.video-list-c ul{
    flex-wrap: wrap;
    padding: 0 .2rem .2rem;
}
.video-list-c ul li{
    position: relative;
     width: 32%;
     height: 2.28rem;
    margin-top: .18rem;
    background-size: cover;
    background-repeat: no-repeat;
 }
.video-list-c ul li:not(:nth-child(3n)){
    margin-right: 2%;
}
.video-list-c ul li:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background-color: rgba(0,0,0,.3);
    z-index: 10;
}
.video-list-c ul li:after{
    position: absolute;
    content: '';
    width: .4rem;
    height: .4rem;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform:translate(-50%,-50%);
    background-image: url("../images/video-play.png");
    background-size: 100% 100%;
    z-index: 11;
}
.video-list-c ul li a{
    position: relative;
    display: block;
    width: 100%;
    height:100%;
    z-index: 20;
}

踩坑二：关于自动播放的问题

<video id="my-video" poster="${image}" preload="load" autoplay controls >
        <source src="${videoUrl}" type="video/mp4">
        您的浏览器不支持video标签。
</video>

1.微信浏览器尽管设置了autoplay，但是不生效。需要设置微信JSAPI 的WeiixinJSBridgeReady()方法。

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    $(document).ready(function() {
        document.addEventListener('WeixinJSBridgeReady',function(){
            document.getElementById("my-video").play();
        },false);
    })
</script>

设置了以上代码后在ios微信浏览器可以自动播放，但是安卓微信浏览器还需要点击播放才能播放。

2.chrome66以及更高的版本不允许媒体自动播放，原因是提高用户体验，减少数据消耗，现在都在遵循autoplay政策。
对于谷歌浏览器，直接调用play()方法会抛出异常：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.。

 $(document).ready(function() {
        document.addEventListener('WeixinJSBridgeReady',function(){
            document.getElementById("my-video").play();

        },false);
        //document.getElementById("my-video").play();//谷歌浏览器播放抛异常
    })

解决方法：
（1）.video可以设置muted属性，即静音播放，则不会报错，谷歌静音自动播放总是被允许的。（视频虽然自动播放了，但是静音，没有声音的视频也不算解决方法）。
（2）.修改谷歌自动播放协议（此方案不能实质解决问题，因为你不能让用户也这么操作修改协议）

• Open chrome://flags/#autoplay-policy
• Setting No user gesture is required
• Relaunch Chrome

3.safari ，opera也都阻止自动播放视频。

踩坑三：关于视频宽高设置的问题

刚开始只设置了video标签的宽度，高度自动，发现进来页面会跳一下，原因是视频加载后高度与video的初始高度不一致。
解决方法：
设置父元素的宽高，使video填充父元素。

<div class="video-list-d">
    <video id="my-video" poster="${image}" preload="load" autoplay controls>
        <source src="${videoUrl}" type="video/mp4">
        您的浏览器不支持video标签。
    </video>
</div>

父元素的背景色设置为黑色，并且使用object-fit: scale-down;使视频不变形填充到父容器中

html,body{
    width: 100%;
    height: 100%;
}
.video-list-d{
    width: 100%;
    height:100%;
    background-color: #000;
}
.video-list-d video{
    width: 100%;
    height:100%;
    object-fit: scale-down;
}

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe