[html]videoの埋込方法と活用方法

あんまりやらない。

あんまり使わないタグ
活用例
<video>タグのレスポンシブ
スマホ対応の自動再生
サムネの設置
動画形式を増やす
ダウンロード禁止ギミック
まとめ

あんまり使わないタグ

動画の埋込がサポートされて、構築環境は良くなった。だけど今度は動画ファイルと向き合ったときに、<video>で指定するよりも<iframe>でyoutubeとかを埋め込んだほうがよくない？ってケースが出てくる。配信サービスに投稿すればそっちで見てもらえる可能性があるし、サーバーを圧迫しないしダメージも浅いし。そんな感じで単に動画を埋め込みたいだけなら<video>は要らない。なので、身近になった割に活用頻度は低い。

活用例

動画を背景にするとか。Youtubeを埋め込むとロゴが邪魔だったりする。消せるけど。

YouTubeの埋め込み動画を自動再生かつループ再生させる

JSを使わずにiframeだけでYouTubeの埋め込み動画を自動再生かつループ再生させて、背景の動画をYouTubeの動画にする方法です。目次 1. 動画の自動再生2. 動画のループ再生3. 動画の自動再生&ループ再生4. コン

PCだったらどうとでもできるんだけどネックになるのはスマホ環境で、Youtubeは仕様上、スマホでの自動再生に対応してない。

<video>は消音であればスマホでも自動再生が可能になる。差別化ができるとしたらこの点になるかなと。とはいえ、低速状態だったら自動再生にならないとか縛りはあるらしい。

<video>タグのレスポンシブ

<video>は<img>みたいな感じでサイズを調整できる。だから縦横比はちゃんと維持されてる。めっちゃ楽。

video{
    width: 100%;
    height: auto;
}

好き放題できる。

youtubeだと厄介なのでとても助かる。

スマホ対応の自動再生

プロパティを追加すればOK。

<video src="movie/sample.mp4" controls muted autoplay playsinline loop></video>

賑やかしのためだったらコントローラーは不要なんで、「controls」を消しても良いとおもう。

「playsinline」はページ上での再生設定。通常、スマホで動画を見ると黒背景のアレになる。ページ内で見せたいならこれを足す。

サムネの設置

<video src="movie/sample.mp4" poster="image.jpg"></video>

動画形式を増やす

ブラウザがファイル形式を判別して対応するものを表示する。

<video>
    <source src="movie/sample.webm" type="video/webm">
    <source src="movie/sample.mp4" type="video/mp4">
</video>

<source>を使ってるけど<picture>みたいな汎用性はない。mediaでブラウザ幅切り替えはできないっぽい。他にも<video>だと使えない属性はある。くわしくはこちら。

ダウンロード禁止ギミック

通常はコントロール内にダウンロードがある。嫌な人もいると思う。非表示の方法は用意されてる。

<video src="movie/sample.mp4" controlsList="nodownload"></video>

右クリックからダウンロードできる場合があって、対策するなら右クリック禁止を足す。

<video src="movie/sample.mp4" controlsList="nodownload" oncontextmenu="return false;"></video>

ソースコード覗いてファイルのURLを引っ張られたらどうしようもないんだけどね。

まとめ

<video>自体はそれほど難しいタグじゃない、<img>みたいに気軽に使えるタグ。

だけどやっぱり、素材の準備だとかアップする環境だとか、そのへんが整ってないとつらい。