「サイトのメインビジュアル部分の背景を動画にしたい」ということ、ありませんか？
僕はサイト制作の依頼で時々あります。そこでよく問題になるのがiPhoneだと動画が再生されないということです。大体は覚えているんですが、毎度検索するので、今回備忘録として残しておきます。
スポンサーリンクiPhoneでも動画を自動再生させる設定
結論から言います。自動再生の「autoplay」属性に加えて「muted」「playsinline」属性を追加してください。どちらも必要です。
<video src="https://lucklog.info/mov/動画ファイル名.mp4" autoplay muted playsinline>
</video>
僕の場合は、「muted」が必要なことは覚えているのですが、「playsinline」をよく忘れてしまいます。
「muted」を覚えている理由
スマホを見ていて、サイトを開いたら急に動画が自動再生されて音が出たら困りますよね？そうならないように自動再生には「muted」が必須なんだろうなぁと覚えているので、「muted」は忘れないんですよね。
「playsinline」とは？
映像を「インライン」で再生するとのことです。つまり、タグが設置されているところで再生するかを指定します。
そういえば、スマホで動画の再生ボタンを押すと、全画面で動画が再生されますよね？
つまり、「playsinline」が設定されていない場合は、全画面で動画を再生するという感じなのだと思います。
ですので、自動再生の場合は、その場で再生させる必要があるため「playsinline」属性が必要になってくるのだと思うことにします（笑）。
検証
以下で実際に試してみました。スマホで再生させてみてください。ちなみに、自動再生ではないので、クリックして再生してくださいね。
僕のiPhoneで試したところ、「playsinline有」はその場で再生されて、「playsinline無」は動画が画面全体で開かれて再生されました。予想通りの結果でした。
▼playsinline有
▼playsinline無
引き続きいろいろ検証しておきましょう。
検証（mutedとplaysinlineの組み合わせ）
実際に「muted」と「playsinline」の組み合わせ4パターンを検証してみました。実際にスマホで確認してみてください。
パターン１：autoplayのみ
僕のiPhoneでは自動再生されませんでした。
パターン２：autoplayとmuted
僕のiPhoneでは自動再生されませんでした。
パターン３：autoplayとplaysinline
僕のiPhoneでは自動再生されませんでした。
パターン４：autoplayとmutedとplaysinline
僕のiPhoneでは自動再生されました。
動画をループさせたい場合はloop属性もつけましょう
<video src="https://lucklog.info/mov/動画ファイル名.mp4" autoplay muted playsinline loop>
</video>
まとめ
videoタグで動画を自動再生させたい場合は、「autoplay」「muted」「playsinline」この3つの属性を設定しましょう。動画をループさせたい場合は「loop」も設定してください。
「muted」「playsinline」この2つは忘れがちなので、要チェックです。
スポンサーリンク
