背景
アプリ制作中に動画を埋め込みたいと考え調べたところ主に2つのやり方が出てきたので備忘録として記載する。
videoタグを使用する場合
videoタグは、mp4やwebmなどの動画ファイルを読み込むことで動画を表示します。
###書き方
<video src="video.mp4" 属性></video>
様々な属性を付与することで多様な実装が可能になります。
属性一覧
####controls:コントロールパネルを表示する
再生ボタンや再生位置(シーク)、ボリュームなどのコントロールパネルを表示することができる。
<video src="video.mp4" controls></video>
####auto:自動再生する
auto属性を指定することで動画を自動再生できる。ただ、chromeやsafariではmuted属性で動画の音をでないように設定する必要があります。
<video src="video.mp4" autoplay muted></video>
####playsinline:インライン再生する
全画面表示をせずにその場で再生させることができる。
インライン再生するためには「autoplay」、「muted」、「playsinline」の3つの属性が必須です。
<video autoplay muted playsinline src="https://××××××.mp4"></video>
####loop:繰り返し再生
動画を自動で繰り返し再生させる。
<video src="sample-video.mp4" loop autoplay muted></video>
##ブートストラップを使う場合
ルールは 「iframe」, 「embed」, 「video」, 「object」 要素に直接適用される。別の属性のスタイルに合わせる場合は、オプションで明示的な子孫クラス .embed-responsive-item を使用。
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>