Webページに動画を埋め込んでみたくなりました。

HTML&CSS

2017.12.27

最近Delphiにはまりそうなyamashitaです。「これで簡単に検証に役立つツールなんて作れたらなあ」なんて妄想してます。
さて今回紹介するのはHTMLで動画を再生させるVideoタグです。
動画をページに埋め込みたかったのでいくつか動画を再生する方法を調べましたが一番簡単そうに見えたので採用しました。
ご存知の方も多いかと思いますが、備忘録にお付き合いいただければと思います。

第一関門～クリックしても再生できない～

埋め込むだけならすぐできました。ソースとサイズを指定してタグで囲むだけです。

<video width="100">
    <source src="/movie/sample.mp4">
</video>

ですがこれだと問題がありました。サムネをクリックするだけでは再生されないのです。
何度クリックしても再生されません。なんとか右クリックからできましたが、普通そこまで頭が回りませんよね。
そこで以下のようにcontrol属性を付与します。

<video controls width="100">
    <source src="/movie/sample.mp4">
</video>

これで再生ボタンやシークバーなどが表示されます。

ググってみたら色んな拡張子で動画用意してるけどそんなに動画用意しなくちゃいけないの！？

videoタグを検索すると大体こういうのが出てきます。

<video controls width="100">
    <source src="/movie/sample.mp4">
    <source src="/movie/sample.ogv">
    <source src="/movie/sample.webm">
    <!-- 以下略 -->
    <p>すまん全部無理だった</p>
</video>

この書き方はどうやら一個目のsample.mp4にブラウザが対応しておらず、再生できなかった場合二行目のsample.ogv、さらに再生できない場合は三行目の・・・
と続いていくみたいですね。
じゃあ必要なの？と思いますが、現在主要なブラウザはどれもmp4には対応しています。
※参考：Can I use...
IEの古いバージョンは対応していないようですがwindowsOSと共にとっくにサポートが終わっているので求められない限りは必要ないのではと感じました。

その他の属性

preload

これは動画の読み込みを指定する属性です。
動画の読み込みで時間がかかって表示が遅いとユーザーが直ぐ帰っちゃうこともあります。
また、スマートフォンだと月の通信量がきまっているので、やたらに動画を読み込みたくないという事があると思います。
そんな時に使えるのではないでしょうか？
以下は指定できる値です。
auto⇒何も書かなかった時のデフォルト値、ページ表示時に動画を読み込みます
metadata⇒先にメタデータのみ読み込んでおく
none⇒ページ表示時には読み込まず、再生時に読み込みます

<video controls width="100" preload = "metadata">
    <source src="/movie/sample.mp4">
    <p>すまん全部無理だった</p>
</video>

poster

サムネイルです。
素直にサムネイル属性みたいな名前にすればいいのにとか思ってしまいます。
未入力の場合は動画の1フレーム目が表示されてるっぽいです。

<video controls width="100" preload = "metadata" poster = "/img/sample.jpg">
    <source src="/movie/sample.mp4">
    <p>すまん全部無理だった</p>
</video>

他にもいろいろありますが、これくらいあれば困らないのかなと思います。
しかしHTMLにソース書くだけで動画再生できちゃうってすごいですね。
どんどん進化していきますしHTML10くらいの時には念じたらページが生成されそうですね。
これから動画コンテンツを見るときにはバンバンF12連打してみていこうと思います。