Open5
videoタグで自動再生させる時の注意点
RikuWebサイトのファーストビューに動画を自動再生で埋め込むような構図はよく見る。
動画を埋め込む際にプレイヤー非表示で自動再生させたい場合は下記属性が必要になる。
- muted（音声をなくす）
- autoplay（自動再生を許可する）
- playsinline（プレイヤーを非表示にする。参考：https://web.havincoffee.com/html/tag/video/playsinline.html#inpage-ank11）
コードにするとこんな感じ。
<video playsinline muted autoplay src="hoge.mp4"></video>
Rikuで、これは最近知り得たのですが、
iOSでバッテリー状態で用意されている「低電力モード」を有効にすると、
videoタグで読み込んだ動画が自動再生されない仕様になっているみたいです。
自分が制作したとあるサイトで「再生ボタンが表示されている」という声を受けたため調査していたのですが、自分の手元ではいくら試してもその事象が確認できず、しばらく原因不明でした。
Riku徐にtwitterで何か手がかりないかなぐらいのノリで調べていると、
下記のようなツイートを見つけました。
（Twitterで調べるのも大事ですね。
Rikuついでに他のサイトではこの件に関してどういう対応をとっているのか気になったので調べてたのですが、
代替下記のようなパターンに割れてました。
- poster画像で代替画像だけを貼っておく。
- 再生ボタンを押して動画を再生するようにする。
色々サイトを見た感じ、基本的には低電力モードでも自動再生が適用されているような事例は存在しなかったです。再生ボタンが邪魔だったら、前者で対応していてもいいかもですね。
参考にしたサイト：
Riku【結論】
- 低電力モードではvideoタグの自動再生が効かなくなる（再生ボタンが表示される）
- 低電力モードで律儀に対応しているケースはほとんど見なかったので、基本的にはposter画像を配置するとかで間に合いそう。
- Twitterで調べてみるのも大事。