HTML Autoplay video and iOS Low power mode

7 min readJust now

大家好，我是奶綠茶
今天來聊一下關於 HTML5 Video autoplay 的眉眉角角。

如果想要網站 Video 能夠 autoplay 的話，一定要讓影片是 muted，且屬性也要加入 playsinline

<video playsinline muted autoplay>
  <source src="" type="video/mp4">
</video>

但在 iOS low power mode 下，autoplay 會失效，且 Safari 會自動在 Video 加上一個 Play 的 icon。(設計師覺得醜，想要客製化)

預設的 play icon 會蓋住整個 Video，目前也無法有任何 CSS 的辦法可以修改或拿掉。

經過不斷的測試，發現只要加了 autoplay 這個屬性，當 low power mode 時就一定會出現該 icon。

那有沒有辦法知道是否在 low power mode 下呢 ?
查了一下當只要網站還未和使用者有過互動行為(點擊)
直接使用 JS 呼叫 video.play()，就會得一 error，且 error.name 為 NotAllowedError。

然後再偷偷的去翻 apple 的網站原始碼，就會發現 apple 也是用相同的方法，先把一個短影片轉成 base64，然後 play，看是不是得到錯誤，以下是奶綠調整過後的版本。

const detectLowPowerMode = async () => {
  return new Promise((resolve) => {
    const div = document.createElement('div');
    div.style.display = 'none';
    div.innerHTML =
      '<video playsinline preload autoplay muted src="data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAtltZGF0AAACrgYF//+q3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE2NCByMzEwOCAzMWUxOWY5IC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAyMyAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzoweDExMyBtZT1oZXggc3VibWU9NyBwc3k9MSBwc3lfcmQ9MS4wMDowLjAwIG1peGVkX3JlZj0xIG1lX3JhbmdlPTE2IGNocm9tYV9tZT0xIHRyZWxsaXM9MSA4eDhkY3Q9MSBjcW09MCBkZWFkem9uZT0yMSwxMSBmYXN0X3Bza2lwPTEgY2hyb21hX3FwX29mZnNldD0tMiB0aHJlYWRzPTEgbG9va2FoZWFkX3RocmVhZHM9MSBzbGljZWRfdGhyZWFkcz0wIG5yPTAgZGVjaW1hdGU9MSBpbnRlcmxhY2VkPTAgYmx1cmF5X2NvbXBhdD0wIGNvbnN0cmFpbmVkX2ludHJhPTAgYmZyYW1lcz0zIGJfcHlyYW1pZD0yIGJfYWRhcHQ9MSBiX2JpYXM9MCBkaXJlY3Q9MSB3ZWlnaHRiPTEgb3Blbl9nb3A9MCB3ZWlnaHRwPTIga2V5aW50PTI1MCBrZXlpbnRfbWluPTI1IHNjZW5lY3V0PTQwIGludHJhX3JlZnJlc2g9MCByY19sb29rYWhlYWQ9NDAgcmM9Y3JmIG1idHJlZT0xIGNyZj0yMy4wIHFjb21wPTAuNjAgcXBtaW49MCBxcG1heD02OSBxcHN0ZXA9NCBpcF9yYXRpbz0xLjQwIGFxPTE6MS4wMACAAAAAD2WIhAAr//72c3wKa+cHgQAAAAhBmiFsQn/+wAAAAzNtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAAQwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACXnRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAEAAAAAAAAAQwAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAEAAAABAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAEMAAAAAAAEAAAAAAdZtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAADwAAAAEAFXEAAAAAAAtaGRscgAAAAAAAAAAdmlkZQAAAAAAAAAAAAAAAFZpZGVvSGFuZGxlcgAAAAGBbWluZgAAABR2bWhkAAAAAQAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABQXN0YmwAAADBc3RzZAAAAAAAAAABAAAAsWF2YzEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAEAAQAEgAAABIAAAAAAAAAAEUTGF2YzYxLjMuMTAwIGxpYngyNjQAAAAAAAAAAAAAAAAY//8AAAA3YXZjQwFkAAr/4QAaZ2QACqzZXsBbgQEC0oAAAAMAgAAAHgeJEssBAAZo6+PLIsD9+PgAAAAAEHBhc3AAAAABAAAAAQAAABRidHJ0AAAAAAABUfgAAVH4AAAAGHN0dHMAAAAAAAAAAQAAAAIAAAIAAAAAFHN0c3MAAAAAAAAAAQAAAAEAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAALFAAAADAAAABRzdGNvAAAAAAAAAAEAAAAwAAAAYXVkdGEAAABZbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAsaWxzdAAAACSpdG9vAAAAHGRhdGEAAAABAAAAAExhdmY2MS4xLjEwMA=="></video>';
    const video = div.querySelector('video');
    const videoPlay = async () => {
      let isLowPowerMode = false;
      try {
        await video.play();
      } catch (error: any) {
        if (error.name === 'NotAllowedError') {
          isLowPowerMode = true;
        }
      }
      div.remove();
      resolve(isLowPowerMode);
    };
    requestAnimationFrame(() => {
      docEle.appendChild(div);
      videoPlay();
    });
  });
};
export default detectLowPowerMode;

在研究 apple 網站時發現一些有趣的事：

apple 網站都有準備一個動態頁面版本，一個靜態頁面版本。
當然換來的是就是 DOM 元素超多。
當網頁縮放經過指定的 breakpoint 時，就直接切換到靜態頁面版本。
我猜是避免 RWD 時一些動態破版問題。
Android 一率是靜態頁面。
這真的很 apple，XD

HTML Autoplay video and iOS Low power mode

Written by Milk Midi