免費諮詢
↑
Design · 網站設計與費用

網站嵌入影片無法自動播放原因大解密

網站設計與費用發布 2023.06.13更新 2024.03.05閱讀約 2 分鐘

網站的自動播放影片,必須將其調整為靜音、無聲,才可順利自動播放,若沒有加入相對應的設定,所嵌入的影片就會無法順利自動播放喔!

網站嵌入影片

許多部落格網站經營者最常使用文字、圖片來耕耘網站,隨著 行動裝置的興起為了因應現代人繁忙的生活更多人會嵌入影片來解說、示意或吸引讀者的目光,通常我們會使用第三方平台來嵌入影音多媒體,並設定「自動播放影片」,如此一來不僅能增添網站趣味、不佔用網站的容量,更重要的是以「嵌入」的方式不會影響網站載入速度及兼顧個平台流量。

由於它與一般嵌入的影片不同,是使用自動播放的方式表現影片,因此常有網站在嵌入影片後,發生「影片沒有辦法自動播放」的情形。

網站嵌入影片無法自動播放原因

造成影片無法自動播放的原因在就在於「瀏覽器的阻擋」,Google Chrome 在 2018 年的政策宣步,影片必須設定為無聲、靜音,自動播放才會生效,而 Microsoft Edge、Safari 也跟隨 Chrome 的腳步,封鎖網站的自動播放影片。

以最大宗的第三方影音平台 YouTube 為例,嵌入時需在 iframe 中加入 &mute=1 自動播放才會生效,如下圖所示:

網站嵌入影片無法自動播放原因大解密|鵠崙設計
網站嵌入影片無法自動播放原因大解密|鵠崙設計
鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。這篇文章由負責維護的同事撰寫,數字來自實際的報價與維護紀錄。
FAQ

這篇文章,
常問的。

針對這篇內容的問答;更一般的問題看網站設計與費用 hub。

01除了 YouTube,用其他影音平台嵌入的影片會不會也遇到同樣的自動播放問題?

只要是用 iframe 嵌入的第三方影音平台,原理都相同,瀏覽器會阻擋有聲音的自動播放影片,必須將影片設定為靜音、無聲,自動播放才能正常生效,這是瀏覽器統一採用的阻擋機制,並不是單一平台才有的限制。

02為什麼影片一定要設成靜音才能自動播放,不能保留聲音嗎?

瀏覽器是基於使用者體驗考量,避免使用者還沒與網頁互動就被突然的聲音打擾,因此規定自動播放的影片必須先調整為靜音、無聲狀態,等瀏覽器判定符合這個條件後,才會讓影片順利自動播放。

03只有 Chrome 會擋自動播放的影片嗎?其他瀏覽器也一樣嗎?

不只 Chrome,Google Chrome 在 2018 年公布這項政策後,Microsoft Edge 與 Safari 也跟進採用相同的阻擋機制,只要影片沒有設定為靜音、無聲,在這幾款主流瀏覽器上都無法順利自動播放。

04用 YouTube 嵌入影片時,要怎麼調整才能讓自動播放生效?

以 YouTube 為例,在嵌入用的 iframe 網址後方加上 &mute=1 這個參數,把影片設定為靜音狀態,瀏覽器判定符合靜音條件後,自動播放的設定才會正常生效、順利播放出來。

Service

看完之後,想找人做?

網站設計:先理解你的生意、確認架構,再開始設計;費用區間先講清楚。

網頁設計服務
Contact

留下需求,
1 個工作天內回覆。

告訴我們你的產業、現在的網站、想解決什麼;回覆時會附上同產業的案例與估價區間。