video移动端踩坑记
最近做的项目里涉及到一个视频列表，点击播放视频，有点类似短视频APP个人主页的效果，直接使用了h5自带的video标签，没想到坑一个接一个。
首先展示下效果图：
踩坑记录：
踩坑一：视频列表中直接使用多个video标签无法达到产品的设计效果，在ios微信浏览器，即使没有设置controls属性，还是有一个非常大的播放按钮，巨丑，在华为微信浏览器里，没有设置controls属性则不显示播放按钮，只有满屏的图片，无法告诉用户这是可以播放的视频，其次如果视频数量过大，页面加载了多个video标签，网络差的情况下很容易造成卡顿，手机发烫。
ios微信浏览器效果
解决方案：
视频列表使用视频封面图片作为背景图，然后使用伪元素创建阴影层和播放按钮的效果，点击视频跳到视频详情页自动播放视频。
视频列表样式：
.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;
}
踩坑二：关于自动播放的问题
1.微信浏览器尽管设置了autoplay，但是不生效。需要设置微信JSAPI 的WeiixinJSBridgeReady()方法。
设置了以上代码后在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填充父元素。
父元素的背景色设置为黑色，并且使用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
发表评论 (审核通过后显示评论)：