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

Posted 2020-07-02 we are young

    最近做的一个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‘);

5,然后就是这次遇到一个大bug，视频开始是隐藏的，但当我点击让它显示出来然后播放时，页面是显示出来了，但是有部分手机是只有声音而没有图像，这说明video没有显示出来就已经播放了，后来解决方案是再show()一遍，而且而且不能给播放视频事件加延迟，否    则在有些手机也会遇到问题，可是到现在我差不多只能猜测这样的结果，因为实在是出现的没有规律，以后只能继续积累了。

   

6,还有以前很少用到unbind方法，但是这次发现你点击一个页面如果过快的话可能会二次触发的，所以如果只是想触发一次那就在触发结束后用unbind解绑事件。

  上面基本上就是这次项目中遇到的问题，下面再继续延伸一些相关知识以便下次用到：

7,停止下载视频(由于当你暂停视频后有的浏览器可能还会继续下载视频):

   var a = document.getElementById("");
   a.pause();
   a.src=‘‘; 或 a.removeAttribute("src"); 

8,设定播放的时间点定位:

   var a = document.getElementById(‘‘);
   a.seekable.start(0); // 返回开始时间 (秒)
   a.seekable.end(0); // 返回结束时间 (秒)
   a.currentTime = 100; // 定位到第 100 秒播放
   a.played.end(0); // 返回已经播放的时间长度(秒)

9,设定播放范围:

   当在网页里嵌入视频/音频文件时， <audio> 或 <video> 元素允许我们提供一些额外的信息来指定播放哪一时间段。实现的方法是在媒体文件后面跟随(“#”)格式的信息。如：
       src="video.mp4#t=10,20" （从10s播放到20s） 
       src="video.mp4#t=10" （从10s播放到完） 
       src="video.mp4#t=,10" （从开头播放到10s）

这次先到这里吧，下次碰到再补充吧。