⑫動画再生プレイヤーの作成(JavaScript)

前回の記事はこちら

はじめに

今回の記事では、JavaScriptを使ったビデオプレイヤーを作成します。

動画再生プレイヤー

動画再生処理には、VideoJSを使用します。

Video.js - Make your player yours

なお、本記事の後半は有料記事になっており、全ソースコードの公開を行っています。

動画再生プレイヤーの配置

動画再生プレイヤーは以下の２つのファイルで構成されます。

• index.html

  • 動画再生プレイヤーを配置したHTMLファイル

• player.js

  • index.htmlで読み込まれるJavaScriptファイル

この2つのファイルをS3の静的ウェブホスティングを有効にした、MPEG2-TS保存バケットの直下にアップロードするだけです。

【注意！！】
本章では、AWS S3を一般公開（パブリックアクセス可能な状態）する設定を行います。
しかし、この設定を行うと、URLを知っている人は誰でも動画を取得できる状態になります。

実装・構築技術的な部分を中心に話を進めるために、簡易的な方法として、パブリックアクセス可能な状態にしていきますが、インターネット上に公開される、という状況を十分理解したうえで、撮影する映像には十分注意してください。

さらに、実際にシステムとして運用していくためには、外部からは見られないような対策が必須です。

例えば、S3のオブジェクトを指定した時間だけ一時的に公開可能にするPreSignedURLを生成する方法や、MPEG2-TSをAESで暗号化してHLSで配信する方法、AWSの認証サービス(Cognito)を使用して、ログインユーザー認証機構を設ける、など、セキュリティやプライバシーの面から、様々な対策を施す必要があります。

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は外観のカスタマイズが非常に柔軟にできるようになっていますので、色々と試してみてください！