HTML5で動画サイトを作ってみる

技術

こんにちは、マツダです。

前回の「Unityで3Dゲームを作ってみる」に引き続き作ってみるシリーズです。
今回は動画サイトを作ってみようと思います。

 

再生環境を考える

ブラウザで動画を再生する技術としては、以下のものがあります。

  • HTML5
  • Flash Player
  • Silverlight

数年前まではHTML5を実装しているブラウザが少なく、
Silverlightは普及率がイマイチだったためにFlash Player1択でした。

2012年にFlashで作成した社内Wiki用の動画プレイヤー。

 

しかし、Adobeは2020年にFlashのサポートを終了すると発表をしており(※1)、

最近は、Youtubeやニコニコ動画などの大手動画配信サービスもHTML5へ移行されています。

HTML5はPC/スマホのほとんどのブラウザでサポートされ、リアルタイム動画配信にも対応しており(※2)、

今後のスタンダードになっていくと予想されますので今回はHTML5を選択したいと思います。

※1. http://blogs.adobe.com/japan-conversations/201707adobe-flash-update/
※2. HTTP Live StreamingやMPEG-DASHを利用することで可能

 

Videoタグ

HTML5ではvideoタグを使うことで動画の再生が可能です。

chromeでの表示例。controlsによって停止ボタンやシークバー等のUIも付きます。

たった1行のvideoタグを書くだけで動画が再生できました。

videoタグはJavaScriptから操作できますので、クリックすることで再生したり

(上記ソースではonclick=”this.play();”の部分)、連続で別の動画を再生したりすることも可能です。

 

コーデック

上記の野球.mp4はスマホ(Android 7/Xperia Z5 Compact)で撮影したものでコーデックは「H.264/AAC」です。
私が試した限りではPC(windows)のIE/Chrome/Firefox、スマホ(iPhone/Android)の標準ブラウザ(Safari/Chrome)で再生できました。
しかし「H.264/AAC」は特許で保護されたフォーマットであるためプラットフォームによっては再生できない恐れがあります。(※3)
※3. https://support.mozilla.org/ja/kb/html5-audio-and-video-firefox

 

videoタグにはこの問題に対応するためsourceタグで複数の動画ファイルを指定できます。
元の野球.mp4に加えてオープンなコーデックであるwebm形式の野球.webmも指定します。(※4)
※4. webmへの変換はFFmpegやTMPGEnc Video Mastering Works 6等で変換

複数の動画ファイルが指定された場合、ブラウザ側が再生できる動画を自動的に選んで再生してくれます。
こうすることで多くのプラットフォームに対応することが可能になります。
(ちなみにYoutubeでは「VP9/Opus」や「H.264/AAC」等が使われているようです。)

 

コメントの表示

動画を再生するだけだと味気ないので、ニコニコ動画のように動画上にコメントを表示してみます。
HTML5はcanvasタグで自由に描画が可能です。videoタグにcanvasタグを重ねてコメントを描画してみます。

canvasタグをvideoタグに重ねることで、動画の上に文字を表示させることができました。

 

このままだとコメントは横に流れないため、一定間隔(0.1秒等)で文字をずらしたり、
あるいは消したりする処理をJavaScriptで行う必要がありますが、今回はそこまでは実装しません。
これで完成としたいと思います。

 

 

HTTP Rangeリクエスト

videoタグでは、まだダウンロードの完了していない動画の途中から再生できるシーク機能があります。
これはHTTP Rangeリクエストによって、動画ファイルを途中からダウンロードすることで実現しています。
シーク機能を使いたい場合は、Apache等のWebサーバの設定で、HTTP Rangeリクエストを有効にしておきましょう。

 

終わりに

videoタグを利用することで、簡単に動画サイトを作ることができました。
この記事では、単に動画を再生するだけの静的なサイトですが、

  • ユーザが動画をアップロードできる機能
  • コメントを投稿できる機能
  • 動画ランキング機能

等の機能を付けて動的なサイトにすると面白くなりそうです。
もし本格的なサービスを目指すのであれば、以下のようなことも考慮する必要がありそうです。

  • アップロードされた動画をエンコードするための大量のCPUリソースの確保
  • 通信量が膨大になるためAkamaiやCloudFront、Fastly等のCDNの活用
    (あくまでサービスがヒットした場合の話になりますが・・・。)

興味を持たれた方は、ぜひ挑戦してみてください。

またこの記事が誰かの役に立てば幸いです。

 

 

̃Gg[͂ĂȃubN}[Nɒlj