為什麼網站打開不能自動播放聲音或影片？瀏覽器機制說明

在開發網頁時，你可能會想要影片在頁面載入時自動播放。 但由於某些瀏覽器政策和使用者體驗的考量，自動播放視頻可能會遇到一些限制。 以下是一些建議和技巧，幫助你順利實現影片的自動播放功能。

很多部落客或網站經營者，都會有嵌入 YouTube 影片的需求。 而 YouTube 也提供很方便的方式，只要複製貼上 HTML 代碼就能完成嵌入 YouTube 影片，另外也提供很多進階的設定，只要在嵌入影片網址加上簡單的參數，就能達到自動播放和輪播等功能。

使用者已經將這個網站加入至 手機主螢幕，或者安裝 PWA 應用。 簡單來說，當你首次進入一個網站。 如果網站自動播放了一首音樂或是有聲音的影片，而你根本尚未與網站互動過，那麼瀏覽器會強制停止播放，程式會收到一個 Error 警告。 工程師可以用這個 Error 警告顯示提示訊息告訴使用者「您尚未互動過，所以無法播放，請您自行打開聲音選項」。 所以，過往的打開網站就被聲音嚇到的日子不會在出現了。 如果您真的想要聽到聲音，唯一的作法就是要對網站做互動操作，例如點擊、滾動、手動打開影片上的聲音或是手動播放音樂。

播放影片</b>元素可以在 HTML 裡讀取並播放影片</b>，影片支援的格式有 MP4 ( .mp4、.m4v )、WebM ( webm ) 和 Ogg ( .ogg )，影片聲音支援的格式有 MP3 ( .mp3 )、WAV ( .wav ) 和 Ogg ( .ogg )，使用上通常會搭配 表示影片來源， 表示字幕來源。 例如下方的 HTML 開啟後，會使用 在網頁中放入一個影片播放元素，點擊播放就會播放影片 ( 不同瀏覽器會有不同樣式的播放控制器 )。 除了有多個格式的影片檔，也可使用 的方式

HTML &lt;video&gt; 播放影片 / 多媒體影音串流 &lt;video&gt; 標籤 (tag) 是用來播放影片或影音串流。 語法： &lt;video src=&quot;clip.mp4&quot; controls&gt;&lt;/video&gt; &lt;video&gt; 標籤的屬性 (attributes)： src: 影片的位址 (URL) poster: 指定一個圖片位址，做為影片未開始播放之前的預覽圖

本指南將針對中級開發者,深入探討「影片自動播放」在網頁視覺設計與 UX 上的典型應用場景、使用者心理反應、各大瀏覽器的限制、技術實作方法、設計上的最佳實踐,以及常見問題解答,以協助您在不犧牲用戶體驗的前提下善用影片自動播放功能。

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