HTML5でストリーミング動画配信を実装する方法を現役エンジニアが解説【初心者向け】
初心者向けにHTML5でストリーミング配信を実装する方法について解説しています。video要素を使った動画の実装方法の基本、ストリーミング配信を行う際の処理の流れについて学習しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTML5でストリーミング配信された動画再生実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
HTML5でストリーミング配信された動画再生実装することで、HTML5だけでなく配信技術に対するご理解も深まります。
実務では、HTML5でストリーミング配信する会社への就職、HTML5でストリーミング配信を実装する案件獲得などに繋がります。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
ストリーミング再生を実装する方法について詳しく説明していくね！
お願いします！
HTML5で配信された動画再生実装する方法（video要素の使い方）
HTML5 では、videoタグを記述することでプラグインを使わずに動画を再生することができるようになりました。
その方法は、まず、videoタグの中にsrc属性で音声ファイルのアドレスを指定します。
次にcontrols属性によって、音声の再生や停止などのユーザーインターフェースを指定しましょう。
ブラウザごとに表示されるインターフェース（操作パネル）は異なるため、それぞれを確認してから使用しましょう。
また、controls属性を別の属性として記述することによってvideo表示方法を変えることが可能です。
autoplayは自動再生、loopは繰り返しなどと変更することが可能です。
動画のストリーミング配信とは
動画をストリーミング再生する場合大きく２種類の考え方があります。
それが、HTTP Live Streamingとプログレッシブダウンロードです。
HTTP Live Streaming
動画のストリーミング配信で一般的な方法はHTTP Live Streaming（HLS）という技術を利用しています。
HTTP Live Streamingは元々、アップルがiOS向けに開発しました。
HTTPという汎用的なプロトコル（規格）を利用することで、様々な媒体に対して動画配信が可能です。
メリット
手元の端末にダウンロードしない為、著作権対策が可能
専用サーバーを用意する必要がない
デメリット
通信回線が高速安定でない場合は再生が止まってしまう
プログレッシブダウンロード
プログレッシブダウンロードは疑似ストリーミングと呼ばれ、配信データをダウンロードして再生します。
メリット
すべてのデータをダウンロードし終わっていれば、オフライン状態で再度再生が可能。
デメリット
オフライン状態で再度再生が可能ということは、著作権上問題が発生する。
HTML5で動画のストリーミング再生を実装する方法
HTTP Live Streaming
HTTP Live Streamingを利用したストリーミング配信動画の再生実装方法です。
m3u8ファイルについて
m3u8ファイルはストリーミング再生される動画のプレイリストのようなものです。
m3u8ファイル自体をダウンロードしてもオフラインで再生はできません。
m3u8ファイルを利用してストリーミング再生している例としては、TVer、FOD、GYAO!などがあります。
m3u8ファイルを利用した実装
HTTP Live Streamingを利用したストリーミング配信動画を利用する場合は、ライブ配信もオンデマンド配信もどちらにも適しています。
ライブ配信というのは、現在進行系で配信している内容を、配信と同時に見ることを意味します。
オンデマンド配信というのは、過去に配信されていたものを、後日ストリーミング再生で見ることを意味します。
<video src=”./video/test.m3u8″ controls>
でtest.m3u8というファイルを指定することでストリーミング配信されたファイルを再生することが出来ます。
これは、htmlと同じ階層内にあるvideoフォルダの中に、test.m3u8というファイルを用意しているという意味になります。
これだけは覚えたい！絶対パスと相対パスの違いを参考にしていただくと階層についてご理解が深まります。
＊なお次のコードを動作させるためには、./video/test.m3u8の位置に必要なファイルを用意する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video src="./video/test.m3u8" controls>
</video>
</body>
</html>
プログレッシブダウンロード
プログレッシブダウンロードを利用して、疑似ストリーミング再生をする方法です。
mp4の利用
<source src=”./video/test.mp4″>
のように指定することでプログレッシブダウンロードを利用した疑似ストリーミングが可能です。
大きなサイズの動画の場合には分割させる必要があるものの、短い動画はvideoタグによりmp4ファイルなどを再生することが可能です。
＊なお次のコードを動作させるためには、./video/test.mp4の位置に必要なファイルを用意する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>プログレッシブダウンロード</title>
</head>
<body>
<video controls>
<source src="./video/test.mp4">
</video>
</body>
</html>
QuickTimePlayerの利用
また、QuickTimePlayerで再生することもできます。
<source src=”./video/test.mov”>
で指定したvideoタグをhtmlに埋め込んで利用可能です。
＊なお次のコードを動作させるためには、./video/test.movの位置に必要なファイルを用意する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>QuickTimePlayer</title>
</head>
<body>
<video controls>
<source src="./video/test.mov">
</video>
</body>
</html>
この記事を監修してくれた方
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 |
HTML5でストリーミング再生を実装する方法がよく分かったので良かったです！
ゆかりちゃん、今後も分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
