h5嵌入视频遇到的bug及总结

    最近做的一个h5活动因为嵌入视频而发现了好多以前从未发现的问题，在测试的时候不同系统不同版本不同环境等多多少少都出现了些问题，搞得我也是焦头烂额的，不过好在最终问题都解决了，自己也学到了好多东西，为了方便以后用到参考，所以就记下来咯。现在有一个感悟就是当问题来临的时候不要觉得沮丧不要抱怨而要积极面对，有问题就说明自己做的不够好，而问题解决之后自己又能积累一些，又能学到一些新东西，这样不是挺好的吗。哈哈，下面我就简单记下这次h5项目中的问题。

1,webkit-playsinline playsinline 可用于防止ios用户视频播放自动全屏(safari是顽疾暂时没办法搞定)，android是不自动全屏的。

2,$('.video').on('ended',function(){}) 用于检测在视频播放完（不管是快进还是自动播完）之后执行某些操作。 

   $('.video').trigger('play')和document.getElementById('video').play()  用于触发播放视频，由于autoplay在手机端为保护用户流量而被禁用的。

   document.getElementById('video').pause() 暂停 

   document.getElementById('demo').volume+=0.1 控制音量

3,audio不支持autoplay：iphone6下safari，三星(微信 第三方浏览器(chrome)) 

   audio支持autoplay：iphone6下微信，三星自带浏览器 

   video不支持autoplay：iphone6下safari，三星(微信 浏览器 第三方浏览器(chrome))

   video支持autoplay：iphone6下微信 

   以下方案可解决部分手机自动播放问题（当然还有好多不同手机包括不同系统版本还没测，以后会继续更新的）

 1 function autoPlay(id){ 2   var a = document.getElementById(id), 3     play = function(){ 4       a.play(); 5       document.removeEventListener("touchstart",play, false); 6     }; 7   a.play(); 8   document.addEventListener("WeixinJSBridgeReady", function () {//微信 9     play();10   }, false);11   document.addEventListener("touchstart",play, false); //触摸12 }13 autoPlay('audio');

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：h5嵌入视频遇到的bug及总结

关键词：H5