[JavaScript] html5 video標籤注意事項

Chrome 66 禁止聲音自動播放

聲音沒法自動播放這個在IOS/Android上面一直是個慣例，桌面版的Safari在2017年的11版本也宣佈禁掉帶有聲音的多媒體自動播放功能，緊接着在2018年4月份發佈的Chrome 66也正式關掉了聲音自動播放，也就是說<audio autopaly></audio> <video autoplay></video>在桌面版瀏覽器也將失效。

最開始移動端瀏覽器是徹底禁止音視頻自動播放的，考慮到了手機的帶寬以及對電池的消耗。可是後來又改了，由於瀏覽器廠商發現網頁開發人員可能會使用GIF動態圖代替視頻實現自動播放，正如IOS文檔所說，使用GIF的帶寬流量是Video(h264)格式的12倍，而播放性能消耗是2倍，因此這樣對用戶反而是不利的。又或者是使用Canvas進行hack，如Android Chrome文檔提到。所以瀏覽器廠商放開了對多媒體自動播放的限制，只要具有如下條件就能自動播放：

（1）沒音頻軌道，或者設置了muted屬性

（2）在視圖裏面是可見的，要插入到DOM裏面而且不是display: none或者visibility: hidden的，沒有滑出可視區域。

換句話說，只要你不開聲音擾民，且對用戶可見，就讓你自動播放，不須要你去使用GIF的方法進行hack.

桌面版的瀏覽器在近期也使用了這個策略，如升級後的Safari 11的說明：

以及Chrome文檔的說明：

這個策略無疑對視頻網站的衝擊最大，如在Safari打開tudou的提示：

 

 

添加了一個設置嚮導。Chrome的禁止更加人性化，它有一個MEI的策略，這個策略大概是說只要用戶在當前網頁主動播放過超過7s的音視頻（視頻窗口不能小於200 x 140），就容許自動播放。

對於網頁開發人員來講，應當如何有效地規避這個風險呢？

Chrome的文檔給了一個最佳實踐：先把音視頻加一個muted的屬性就能夠自動播放，而後再顯示一個聲音被關掉的按鈕，提示用戶點一下打開聲音。對於視頻來講，確實能夠這樣處理，而對於音頻來講，不少人是監聽頁面點擊事件，只要點一次了就開始播放聲音，通常就是播放個背景音樂。可是若是對於有多個聲音資源的頁面來講如何自動播放多個聲音呢？

首先，若是用戶還沒進行交互就調用播放聲音的API，Chrome會這麼提示：

DOMException: play() failed because the user didn't interact with the document first.

Safari會這麼提示：

NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Chrome報錯提示最爲友善，意思是說，用戶尚未交互，不能調play。用戶的交互包括哪些呢？包括用戶觸發的touchend, click, doubleclick或者是 keydown事件，在這些事件裏面就能調play.

因此上面提到不少人是監聽整個頁面的點擊事件進行播放，無論點的哪裏，只要點了就行，包括觸摸下滑。這種方法只適用於一個聲音資源，不適用多個聲音，多個聲音應該怎麼破呢？這裏並非說要和瀏覽器對着幹，「逆天而行」，咱們的目的仍是爲了提高用戶體驗，由於有些場景若是能自動播放確實比較好，如一些答題的場景，須要聽聲音進行答題，若是用戶在答題的過程當中能依次自動播放相應題目的聲音，確實比較方便。同時也是討論聲音播放的技術實現。

原生播放視頻應該就只能使用video標籤，而原生播放音頻除了使用audio標籤以外，還有另一個API叫AudioContext，它是可以用來控制聲音播放並帶了不少豐富的操控接口。調audio.play必須在點擊事件裏面響應，而使用AudioContext的區別在於只要用戶點過頁面任何一個地方以後就都能播放了。因此能夠用AudioContext取代audio標籤播放聲音。

咱們先用audio.play檢測頁面是否支持自動播放，以便決定咱們播放的時機。

 

video在ios中如何監聽進入和退出全屏的事件

$('#myvideo').on('webkitbeginfullscreen', function() {
      
 }).on('webkitendfullscreen', function() {
     
 });

 

video進入全屏

var video = document.querySelector('#myvideo');
video.webkitEnterFullScreen();