🔋
iPhoneの省電力モードをJavaScriptで判定する方法
<video>が省電力モードだと自動再生されない罠
動画を背景で自動再生する案件に携わったのですが、iPhoneの省電力モードだと自動再生されず、代わりに再生ボタンが表示されることを初めて知りました。
省電力モードかどうかをJavaScriptで判定する
デモ
コードについて
videoタグにはplayメソッドが備わっているので、それが成功したかどうかで処理を分岐させるようにします。
// video タグを取得
const myVideo = document.getElementById("myVideo");
// video タグの play メソッドを実行。実行できなかった場合に省電力モード
myVideo
.play()
.then(() => {
// play() が成功＝省電力モードではない
console.log("省電力モードではありません");
})
.catch((error) => {
// play() が失敗＝省電力モード
console.log(error, "省電力モードです");
});
参考サイト
Discussion