江湖一點訣 — 永遠別認為自動播放會自動播放 / Never assume autoplay will work
覺得我們的內容實用嗎？ MyApollo 電子報讀者募集中！歡迎訂閱電子報!
前陣子提到過跨瀏覽器測試的重要性，在於能夠確保各個功能在各種瀏覽器上都能按照預期正常運作。
會需要跨瀏覽器測試的原因，是每個瀏覽器的實作方式不一定相同，即使是相同的 HTML 標籤，它也有可能表現出不一樣的行為。
今天我就在 <video> 這個 HTML 標籤學到一課：
“Never assume autoplay will work”
<video> 是專門在網頁上嵌入影片的標籤，它有個 autoplay 的屬性，可以自動播放影片。
我測了 Desktop 版的 Chrome, Safari 都正常運作，但到了 iPhone 版的 Safari 就變了樣，變得不會自動播放⋯⋯。
爬梳了文件才知道 video 標籤的 autoplay 屬性在上做了若干限制，必須符合以下其中 1 點才能發揮作用：
- 開啟靜音（怕嚇到人，合理）
- 使用者與網頁有互動（點擊、滑動、按下按鍵等等）
- 網站被瀏覽器列入可以自動播放的白名單中
- 網頁的 Permissions-Policy 標頭(header)中允許自動播放，或者
<iframe>標籤允許自動播放
但是我已經同時開啟 autoplay muted 屬性，變為 <video autoplay muted .../> 卻還是無法讓 iPhone 版的 Safari 自動播放影片，後來查了 Apple Developer 的官方文件才知道，因為 iPhone 版的 Safari 播放影片會進全螢幕模式，使用者離開全螢幕模式才會變為 inline 模式並且繼續播放，如果要讓影片不用進全螢幕模式就能自動播放的話，還需要加上 playsinline 屬性才能自動播放，這個設計是為了節省手持裝置的電力支出，避免 iPhone 平白被影片耗掉電量⋯⋯（合理，但是開發者痛苦XD）。
同時， Apple 官方也建議 playsinline 適合短時長不需要全螢幕播放的影片使用（那好像就是廣告⋯⋯XD）
以上就是本篇的江湖一點訣！
