video video

最近在写视频相关的前端，遇到好多个坑，自己总结一下；

<video class="videoSec" id="video1" controls="controls" poster="img/ppt7tp11.png" preload="auto" x5-playsinline="true" webkit-playsinline="true" playsinline="true"

      src="./video/ppt3.mp4">
</video>

x5-playsinline="true" webkit-playsinline="true" playsinline="true"

禁止视频全屏播放；

我当时还结合了一个插件

基于zepto.js的移动端H5单页面跟随手指滑动切换控件pageSlider

https://blog.csdn.net/qlp3643_1/article/details/50663615

然后视频是自动播放的，但是滑到该页面才开始播放，

var pageSlider = PageSlider.case({
                     //startPage:2,
                     callback:{
                        1:function (){
                           $('#video1').get(0).play();
                        },

});

但是问题来了，这样兼容安卓机是没有问题的，但是ios不能播放，是显示默认的视频封面，并没有播放；

查阅相关资料是微信端没有监听到WeixinJSBridgeReady

document.addEventListener("WeixinJSBridgeReady", function () {
   document.getElementById('video1').play();
 }, false),0});

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

在回调函数里面，然而并没有卵用，

查阅相关资料

是在ios必须在出发播放之后，才可以使用js控制.play();

于是，直接将

$(function(){
   
   document.addEventListener("WeixinJSBridgeReady", function () {
      document.getElementById('video1').play();
      document.getElementById('video1').pause();
   }, false),0});

});

直接写在onload时间里面，上来就播放一下然后暂停，这样就ios也能自动播放了；

能自己查阅自来完成没有写过的前端，感觉还是挺好的，文字功底不是很好，但以后会坚持写技术博客，方便自己查阅，也方便大家交流，第一次写，勿喷，哈哈

https://blog.csdn.net/qlp3643_1/article/details/50663615

猜你喜欢