こんにちは、マツダです。
前回の「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タグを使うことで動画の再生が可能です。
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html> <head> <meta charset="UTF-8"> </head> <body> <video src="野球.mp4" controls preload="none" onclick="this.play();" width="640" height="480"></video> </body> </html> |
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等で変換
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html> <head> <meta charset="UTF-8"> </head> <body> <video controls preload="none" onclick="this.play()" width="480" height="320"> <source src="野球.mp4" type="video/mp4" media="all"> <source src="野球.webm" type="video/webm" media="all"> </video> </body> </html> |
複数の動画ファイルが指定された場合、ブラウザ側が再生できる動画を自動的に選んで再生してくれます。
こうすることで多くのプラットフォームに対応することが可能になります。
(ちなみにYoutubeでは「VP9/Opus」や「H.264/AAC」等が使われているようです。)
コメントの表示
動画を再生するだけだと味気ないので、ニコニコ動画のように動画上にコメントを表示してみます。
HTML5はcanvasタグで自由に描画が可能です。videoタグにcanvasタグを重ねてコメントを描画してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> <!-- function viewComment() { var canvas = document.getElementById('comment_canvas'); var context = canvas.getContext('2d'); context.font= 'bold 22px sans-serif'; context.fillStyle = "red"; context.fillText('がんばれー',10,50,480); context.fillText('ナイスピッチー',10,80,480); } //--> </script> </head> <body onLoad="viewComment()"> <div style="position: relative;"> <video controls preload="none" onclick="this.play()" width="480" height="320" style="position: absolute;"> <source src="野球.mp4" type="video/mp4" media="all"> <source src="野球.webm" type="video/webm" media="all"> </video> <canvas id="comment_canvas" width="480" height="300" style="position: absolute;"> </canvas> </div> </body> </html> |
canvasタグをvideoタグに重ねることで、動画の上に文字を表示させることができました。
このままだとコメントは横に流れないため、一定間隔(0.1秒等)で文字をずらしたり、
あるいは消したりする処理をJavaScriptで行う必要がありますが、今回はそこまでは実装しません。
これで完成としたいと思います。
HTTP Rangeリクエスト
videoタグでは、まだダウンロードの完了していない動画の途中から再生できるシーク機能があります。
これはHTTP Rangeリクエストによって、動画ファイルを途中からダウンロードすることで実現しています。
シーク機能を使いたい場合は、Apache等のWebサーバの設定で、HTTP Rangeリクエストを有効にしておきましょう。
終わりに
videoタグを利用することで、簡単に動画サイトを作ることができました。
この記事では、単に動画を再生するだけの静的なサイトですが、
- ユーザが動画をアップロードできる機能
- コメントを投稿できる機能
- 動画ランキング機能
等の機能を付けて動的なサイトにすると面白くなりそうです。
もし本格的なサービスを目指すのであれば、以下のようなことも考慮する必要がありそうです。
- アップロードされた動画をエンコードするための大量のCPUリソースの確保
- 通信量が膨大になるためAkamaiやCloudFront、Fastly等のCDNの活用
(あくまでサービスがヒットした場合の話になりますが・・・。)
興味を持たれた方は、ぜひ挑戦してみてください。
またこの記事が誰かの役に立てば幸いです。