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');

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）

這次先到這裡吧，下次碰到再補充吧。