⑫動画再生プレイヤーの作成(JavaScript)
前回の記事はこちら
はじめに
今回の記事では、JavaScriptを使ったビデオプレイヤーを作成します。
動画再生処理には、VideoJSを使用します。
なお、本記事の後半は有料記事になっており、全ソースコードの公開を行っています。
動画再生プレイヤーの配置
動画再生プレイヤーは以下の2つのファイルで構成されます。
index.html
動画再生プレイヤーを配置したHTMLファイル
player.js
index.htmlで読み込まれるJavaScriptファイル
この2つのファイルをS3の静的ウェブホスティングを有効にした、MPEG2-TS保存バケットの直下にアップロードするだけです。
S3のバケット一覧画面で、対象のバケットを選択し、「アップロード」ボタンを押すと、アップロード画面が表示されますので、この2つのファイルを選択してアップロードしてください。
アップロード後のバケット直下は以下のようなリストになります。
アップロードしたら、静的ウェブホスティングのURLにブラウザにアクセスしてください。
静的ウェブホスティングの設定時に「インデックスドキュメント」に「index.html」を設定しているので、index.htmlを入力しなくても、以下のようなプレイヤー画面が表示されるはずです。
画面を構成するHTMLコントロールは以下の3つのみです。
input [id = movie-datetime]
再生する動画の開始日時を設定
button
M3U8生成Lambda関数のURLを生成し、VideoJSに渡す関数(LoadMovie)を実行
video-js [id = video-player]
ビデオ再生コントロールVideoJS
日時指定inputで、S3上に保存されているMPEG2-TSの日時を指定して、Loadボタンを押すと、再生が開始されます。
次の記事
ソースコード
ソースコードは非常に単純なので、特に説明は不要だと思います。
VideoJSは外観のカスタマイズが非常に柔軟にできるようになっていますので、色々と試してみてください!
ここから先は
¥ 1,200
この記事が気に入ったらサポートをしてみませんか?