江湖一點訣 — 永遠別認為自動播放會自動播放 / Never assume autoplay will work

前陣子提到過跨瀏覽器測試的重要性,在於能夠確保各個功能在各種瀏覽器上都能按照預期正常運作。

會需要跨瀏覽器測試的原因,是每個瀏覽器的實作方式不一定相同,即使是相同的 HTML 標籤,它也有可能表現出不一樣的行為。

今天我就在 <video> 這個 HTML 標籤學到一課:

“Never assume autoplay will work”

<video> 是專門在網頁上嵌入影片的標籤,它有個 autoplay 的屬性,可以自動播放影片。

我測了 Desktop 版的 Chrome, Safari 都正常運作,但到了 iPhone 版的 Safari 就變了樣,變得不會自動播放⋯⋯。

爬梳了文件才知道 video 標籤的 autoplay 屬性在上做了若干限制,必須符合以下其中 1 點才能發揮作用:

  1. 開啟靜音(怕嚇到人,合理)
  2. 使用者與網頁有互動(點擊、滑動、按下按鍵等等)
  3. 網站被瀏覽器列入可以自動播放的白名單中
  4. 網頁的 Permissions-Policy 標頭(header)中允許自動播放,或者 <iframe> 標籤允許自動播放

但是我已經同時開啟 autoplay muted 屬性,變為 <video autoplay muted .../> 卻還是無法讓 iPhone 版的 Safari 自動播放影片,後來查了 Apple Developer 的官方文件才知道,因為 iPhone 版的 Safari 播放影片會進全螢幕模式,使用者離開全螢幕模式才會變為 inline 模式並且繼續播放,如果要讓影片不用進全螢幕模式就能自動播放的話,還需要加上 playsinline 屬性才能自動播放,這個設計是為了節省手持裝置的電力支出,避免 iPhone 平白被影片耗掉電量⋯⋯(合理,但是開發者痛苦XD)。

同時, Apple 官方也建議 playsinline 適合短時長不需要全螢幕播放的影片使用(那好像就是廣告⋯⋯XD)

以上就是本篇的江湖一點訣!

References

Delivering Video Content for Safari

Autoplay guide for media and Web Audio APIs

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!