ひかりマテリアル

はにかむねっと

videoタグについて


👤 sudosan 📆 7月 1, 2015 📝 0

始めに言っておくと僕はFlashが大嫌いです。
確かに全盛期にはお世話になりましたがこのご時世で未だに使ってるサイトはどうかと思います。

本題に入りますがWebサイトに動画を埋め込むとき、昔はよくFlashが使われていました。(それ以前はReal Mediaとかだった気がする)
現在、最新のHTML5ではVideoタグが実装され簡単に動画を埋め込むことができるようになっています。しかし、これはコーデックのサポートがブラウザ毎にばらばらで、クロスプラットフォーム的には厳しい仕様となっています。そこで、以下の様な方法を使って複数のソースを指定することで、たくさんのブラウザに対応させることができます
しかし、その分サーバーの容量を食ってしまうので、少し問題ではあります。


WikipediaによるとH.264とVP8の動画を貼ることで、ほぼすべてのモダンブラウザ(ここ重要)に対応させることができるらしい。
それに加えてVP9も貼れば対応ブラウザではそちらを再生させることができる。VP9は次世代規格の一つで高圧縮なフォーマットだ。これを使えば同じビットレートでもより高い画質に、同じ画質でもより小さい容量にできる。これを使わない手はないだろう。

今回使わさせてもらったのはClover Day’sというゲームのムービー。利用条件が比較的緩く助かった。
ALcot『Clover Day's』応援中!

あとはこんな感じでコードを貼ればOK

そうするとこうなる

©ALcot Clover Day’s

こうすることによって

  • Android2.3以降
  • Chrome3.0以降
  • Internet Explorer9.0以降
  • Firefox4.0以降
  • Opera11.50以降
  • Safari3.1以降
  • その他モダンブラウザ

に対応することができる。
それ以下の産廃使ってる奴は知らん。
また

  • Chrome29.0以降
  • Firefox28.0以降
  • Opera16.0以降

ではより高画質なVP9で再生させることができる。強い


追伸。

前回の記事を書いた時、エンコヤクザにエンコ設定を書けと脅迫されたので今回は書いておく
検証目的なので適当に軽めにエンコした。やっぱエンコはわからん

H.264(64.8MB)

–preset placebo –crf 22 –bframes 3 –b-adapt 1 –partitions p8x8,b8x8,i8x8,i4x4 –merange 32 –direct spatial –ref 4 –trellis 1

VP9(61.3MB)

-crf 22 -threads 8 -speed 0 -tile-columns 6 -frame-parallel 1 -auto-alt-ref 1 -lag-in-frames 25 -g 9999 -aq-mode 0

VP8(60.3MB)

-b:v 3.1M


カテゴリ:Uncategorized, 未分類

タグ:

関連

共有

コメント