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

[JavaScript] html5 video標簽註意事項