🔋

iPhoneの省電力モードをJavaScriptで判定する方法

2022/08/02に公開約1,200字

<video>が省電力モードだと自動再生されない罠

動画を背景で自動再生する案件に携わったのですが、iPhoneの省電力モードだと自動再生されず、代わりに再生ボタンが表示されることを初めて知りました。

省電力モードかどうかをJavaScriptで判定する

デモ

コードについて

videoタグにはplayメソッドが備わっているので、それを実行できたかどうかで処理を分岐させるようにします。

// videoタグを取得
const myVideo = document.getElementById("myVideo");

// videoタグのplayメソッドを実行。実行できなかった場合に省電力モード
myVideo
  .play()
  .then(() => {
    // 省電力モードではないときの処理
    console.log("省電力モードではありません");
  })
  .catch((error) => {
    // 省電力モードのときの処理
    console.log(error, "省電力モードです");
  });

参考サイト

https://stackoverflow.com/questions/46670150/low-power-mode-detection-in-javascript-for-ios11
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs
https://html.spec.whatwg.org/multipage/media.html#the-video-element

Discussion

ログインするとコメントできます