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

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

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

再生環境を考える

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

HTML5
Flash Player
Silverlight

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

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タグを使うことで動画の再生が可能です。

<!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>

<!doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

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

たった１行の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等で変換

<!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>

<!doctype html>

<html>

<head>

</head>

<body>

</video>

</body>

</html>

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

コメントの表示

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

<!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>

<!doctype html>

<html>

<head>

<!--

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>

</video>

</canvas>

</div>

</body>

</html>

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

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

HTTP Rangeリクエスト

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

終わりに

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

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

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

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

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

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