為什麼網站打開不能自動播放音樂或有聲影片?

#網路趨勢

為什麼網站打開不能自動播放音樂或有聲影片?

為什麼網站一進場,不能播放一個歡迎消費者的音樂呢?或者提供一部聲效果俱佳的歡迎影片?

這也是我們許多客戶想做卻沒有辦法提供的功能。今天這篇文章介紹一下,現今的網路瀏覽器的機制。

過去的回憶:網站背景音樂

許多資深或從小開始玩網路、嘗試架設烘焙機、或早期網路玩家等等,熟悉的一件事就是網站背景音樂。例如古早手工編寫 HTML 的時代,大家常常會在網站上放置 midi 水晶音樂。或者無名時代,可以掛載流行音樂 mp3 當做小工具 (Widget)。骨灰級網路使用者回想起來肯定淚流滿面。

via One Terabyte of Kilobyte Age

現代的網路世界:禁止驚嚇使用者(Autoplay Policy)

很可惜的,到了 2018 年左右,歐美的網路世界漸漸形成一種共識,這種會突然跳出聲音、或者在使用者沒有授權就自動調用喇叭播音樂的行為,開始被認為是個人權益的侵犯。而因為廣告自動播放有聲影片的網站越來越多,使用者常常找不到正在播放音樂的頁籤是哪一個,而不得不忍受重疊的背景音樂(一首音樂很悅耳,三首一起播放就會令人抓狂)。

國外網友的 meme: 我會找到你,然後暫停你! via

所以各大主流瀏覽器如 Chrome, Safari, Firefox 逐漸引進了一種機制,叫做 Autoplay Policy,他制定了一系列播放影音的規定,假設使用者是第一次造訪某個網站:

  • 如果影片是禁音或無聲音的,允許無聲自動播放

  • 如果是有聲音的影音要自動播放,需滿足以下條件:

    • 使用者必須與網站進行互動過(點擊、滾動等等)

    • 桌面瀏覽器上,使用者必須滿足一個互動指標的閾值,又叫做「媒體參與指數 (MEI) 」,例如已多次互動過,或者手動開啟過聲音,這會被轉換成一個互動分數

    • 使用者已經將這個網站加入至手機主螢幕,或者安裝 PWA 應用

  • 如果影片是在 iframe 中播放的,網頁可以將目前的自動播放權限下放給 iframe(用於處理類似 Youtube 這樣得嵌入式影片)

Autoplay Policy 機制如何運作

簡單來說,當你首次進入一個網站。如果網站自動播放了一首音樂或是有聲音的影片,而你根本尚未與網站互動過,那麼瀏覽器會強制停止播放,程式會收到一個 Error 警告。工程師可以用這個 Error 警告顯示提示訊息告訴使用者「您尚未互動過,所以無法播放,請您自行打開聲音選項」。所以,過往的打開網站就被聲音嚇到的日子不會在出現了。

如果您真的想要聽到聲音,唯一的作法就是要對網站做互動操作,例如點擊、滾動、手動打開影片上的聲音或是手動播放音樂。一旦做了這些操作,且滿足了互動閾值,下次進到網站時,就會自動播放了。

以 Chrome 瀏覽器來說,他的閾值(媒體參與指數 (MEI))是衡量個人在網站上使用媒體的傾向。 Chrome 的方法是計算每個來源的重要媒體播放事件的存取比率:

  • 媒體(音訊/視訊)的消耗必須大於 7 秒。

  • 音訊必須存在且未靜音。

  • 包含影片的頁籤處於使用狀態。

  • 視訊大小(以像素為單位)必須大於200x140

等等,每家瀏覽器的能都會有部分差異。

影音網站怎麼辦?

您可能會問:那 Youtube 那些網站,為什麼能自動播放音樂?這是因為基本上您在使用網路的過程中,一定早就與 Youtube 的網域互動過,例如從別的網站的嵌入頁面觀看過 Youtube 頁面,所以大多數影音網站的互動閾值早就超過了。

國外其實不少網站教學如何解除 Youtube 靜音

另外,這些網站也會很聰明的做一些手法,例如 Youtube 通常不會在你打開頁面時就自動播放,而是要等到您從其他頁籤轉回來看到影片後,才開始播放,這時候你可能早就做過其他互動了,所以產生了無縫播放聲音的感覺。

實務的作法

由於以上機制的存在,現在的網站設計,更建議要把影音播放提供給使用者自主操作。例如明顯的提供一個手動播放按鈕,當自動播放被政策擋住時,使用者依然有權力自己啟動影音。

讓使用者自行點擊播放是最保險的

或者單純的將影片靜音播放,當成是動畫展示,以避免驚嚇使用者,這都是較為現代化的處理方式。例如下圖是我們的影片展示(金融網站設計),採用靜音的方式無縫播放,帶來流暢的體驗。

無聲影片自動播放

結論:讓使用者開心,才會用你的網站

現代的網站琳琅滿目,充滿視覺特效與廣告,因此,三不五時彈出干擾性的聲響,可能會讓使用者提早關掉你的網站,反而造成損失。將主導權轉回消費者身上,讓他們自己決定何時播放您的影片與聲音,更能讓使用者感受到被尊重,進而繼續瀏覽網站並消費。

如果您要做一個圖文與影音並茂的網站,夏木樂專精於超大型影音上傳管理 (超過 4G)、串流音樂播放器 與影音防盜機制等等現代化影音平台製作技術,歡迎聯繫我們取得最佳建議。

相關文章

【服務介紹】歐美風格網站設計服務

夏木樂是台灣少數專長於歐美風格設計的網站公司,同時也具備國際級的程式開發實力。這篇文章稍微介紹了一下我們的設計風格與服務流程,讓大家可以快速認識我們的...

網域名稱怎麼取? 5種常見的取名方式

剛起步的網站,總會遇到網域取名這種亙古難題,以下五種方式,幫助您更輕鬆地找到自己適合的網域名稱! 1.品牌名稱 最簡單且直白,有意發展品牌的公司不妨用...