シンプルな Web プレイヤーの開発と展開
ストリーミング プレイヤーの開発 ビデオストリーミング技術の紹介でも触れたように、 現在、ビデオストリーミングは Web 技術との親和性が高く、ストリーミングビデオは Web ブラウザー上で、 JavaScript を使って開発されたプレイヤーで再生することができるようになっています。 普及している2つのストリーミングプロトコル (HLS, MPEG-DASH) のビデオストリームを再生することができる、 実績のあるオープンソースのプレイヤーがあります。以下のプレイヤーです。 HLS の再生: hls.js | Github MPEG-DASH の再生: dash.js | GitHub この記事では、これらを使って、Web プレイヤーをホストするページを開発します。 hls.js プレイヤー：シンプルなコード もっともシンプルな hls.js の再生プレイヤーのページのコードは以下の通りです。 hls.js が提供する Hls クラスを使ってビデオプレイヤーを初期化し、再生したい HLS ストリームの URL を プレイヤーにロードすることでビデオストリームの再生をトリガーすることができます。 ビデオプレイヤーを表示するためには、プレイヤーを表示するための HTML 要素をアタッチします。 以下のコード例では、<video> タグで HLS の再生をネイティブサポートしているプレイヤー (Safari など) も 対応できるようにしてあります。その場合は、HLS ストリームの再生に hls.js を使いません。 より細かなコントロールを行うためのアプリケーションの開発を行うには、Hls クラスの API の詳細を確認します。 hls.js API ドキュメント を参照します。 <body> <!-- プレイヤーのコンテナ要素 --> <div class="hls-js-container"> <video id="hls-js-player" controls width="640px"></video> </div> <!...