[html] 【コピペで使える】よく使うvideoタグの書き方

公開日:2023/10/28 更新日:2024/04/15

メインビジュアルなどに設置して自動再生する場合

<video src="xxx.mp4" poster="xxx.jpg" muted autoplay loop playsinline>
    <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

「autoplay」属性をつけることで動画が自動再生されますが、ウェブサイトの閲覧環境によってはこれだけでは自動再生されません。
「muted」属性で無音にし、iOS環境で再生させるために「playsinline」属性も設定しましょう。

ページの途中に設置して手動再生してもらう場合

<video src="xxx.mp4" poster="xxx.jpg" controls muted playsinline preload="none"> <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p> </video>
「controls」属性をつけることで、再生・停止ボタンやシークバーを設置することができます。
「preload="none"」属性で再生ボタンを押したときに動画の読み込みが行われるようにできます。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。