瀏覧器影音自動播放之研究手札 (Chrome、Firefox)

發表於

我在做影片截選播放清單時，遇到播放時會停住的問題，並發現在各瀏覽器、各網站的表現不同，用戶回報給我的狀況也都不同。我對這件事做了些研究，並撰寫下此文記錄。為了改善用戶體驗，瀏覽器正朝著更嚴格的自動播放政策發展。它的目的是讓用戶對播放有更大的控制權，並(Chrome稱)讓有合法用途的出版商受益。

這篇文章會提及Chrome、Firefox的自動播放規則，身為網站開發者我們該怎麼處理前端；身為用戶我們該怎麼手動允許特定網站的自動播放。

「阻擋自動播放」行為的明確定義

「自動播放 (Autoplay)」是指在用戶沒有明確要求開始播放的情況下，導致音頻開始播放的任何功能。這既包括使用HTML屬性來自動播放媒體，也包括在沒有互動就使用JavaScript程式開始播放。

換句話說

<audio src="/music.mp3" autoplay>
audioElement.play();

都會被阻止。

具體來說，此規則套用在HTML <audio> 、<video> 元素，以及 Web Audio API

Chrome的自動播放規則

  • 始終允許靜音影片的自動播放
  • 在以下條件允許自動播放:
    • 使用者當前已經與該domain進行了互動、點擊
    • 在桌面裝置上，使用者的Media Engagement Index已經超過閾值，也代表用戶以前曾在此網站播放多次帶聲音的媒體
    • 在手機裝置上，使用者已將該網站加到他們的手機主畫面上，或在桌面裝置上安裝為PWA
  • 使用者可以針對個別網站添加例外
  • 上層可以將自動播放權限傳遞給他們的iframe

Media Engagement Index (MEI)

這東西是Chrome獨有的。Media Engagement Index直譯是「媒體參與指數」，Chrome會計算使用者對各網域的媒體互動程度，並以此評分。

算分數時有如下限制

  • 媒體(音頻、視頻)的播放必須大於7秒
  • 音頻必須存在並且沒有靜音
  • 有影片的該頁籤是active
  • 影片的大小必須大於200px * 140px

簡單來說，你看越久影片，該網站分數就越高。而當它超過一定值，就會啟動自動播放。

Chrome使用者可以訪問 about://media-engagement 查看自己的MEI。

Firefox的自動播放規則

Firefox的自動播放預設為「封鎖音訊」，即允許靜音影片的自動播放。此跨站預設值可由使用者自行修改。

  • 「封鎖音訊」:  允許靜音影片的自動播放，封鎖其它影片的自動播放，直到使用者當前已經與該domain進行了互動、點擊 (這是預設值)
  • 「封鎖影音內容」: 封鎖所有影片的自動播放，即使它是靜音影片
  • 「允許自動播放影音內容」: 字面意思，全面允許自動播放
  • 使用者可以針對個別網站添加例外
  • 上層可以將自動播放權限傳遞給他們的iframe

我們開發者怎麼活 (╯°Д°)╯ ┻━┻

兩條路

  • 靜音播放，並顯示按鈕要使用者手動按unmute。這個「按按鈕」的行為是互動，會允許音頻播放。Facebook, Instagram, Twitter, YouTube 都是這麼做。
    <video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>
  • 對video元素play()，並處理fallback，請使用者手動點擊。
    var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}
延伸閱讀，請確認此章Chrome部落格給開發者的建議
https://developer.chrome.com/blog/autoplay/#best-practices-for-web-developers

若你有用到iframe，也注意一下iframe-delegation這個章節
https://developer.chrome.com/blog/autoplay/#iframe-delegation

我們使用者怎麼活 ┬─┬ ノ( ' - 'ノ)

Chrome的手動允許方法

方法一

來到此頁面 chrome://settings/content/sound ，在最下方的「可以播放音效」添加要允許自動播放的網站

方法二

方法二結果同方法一，都學起來

直接打開目標網站，點擊網址列左側的小鎖頭
(不要理會這裡的音訊開關，它沒用)

在siteDetails頁往下捲，找到 🔊音訊 ，選擇 允許

如此操作後，即使我在此站的MEI並未是High，它仍能自動播放

Firefox的手動允許方法

調整預設設定

來到設定的「隱私與安全性」頁面 about:preferences#privacy ，下拉到「自動播放」，點右側「設定」

在「對所有網站的預設行為:」下拉選單中，選中你想要的預設行為，三選項的詳細意義見此

調整個別例外

如果你預設設定是選擇封鎖，可以再針對個別網頁設定例外。來到站點觸發一次阻擋Autoplay，網址列左方會多一個「禁止播放」的符號，此時點它就能在下拉選單中設定自動播放的例外規則。

如果你回到「隱私與安全性」這裡，下方可以管理所有允許過的例外規則。

參考資料

附註

我在爬文時讀到下方這篇，其中關於Chrome enterprise policy的說明是錯誤的。

Day20 Autoplay 與 mute - iT 邦幫忙
https://ithelp.ithome.com.tw/articles/10218679

此處的Policy是指群組原則、Chrome 政策，而不是什麼特殊人與人關係。這是由企業管理員對網域內的電腦做Chrome原則設定。這和電腦沒加網域的一般使用者無關。

更多資訊請確認下方文件:

標籤： , ,

沒有留言:

張貼留言

本站遭到垃圾留言(病毒連結)攻擊，開啟審核模式。留言後並不會馬上公開顯示。

訂閱： 張貼留言 (Atom)

目錄