Wowzaを使って配信しよう-⑤再生プレイヤー構築編-


今回使用するプレイヤーはgithubで公開されている、clapprを使いたいと思います

clapprはHLSのLive及びVODを再生する事が出来るJavaScriptを使ったプレイヤーです

デスクトップPCやMacは勿論、FlashPlayerが入っていない最近のスマートフォンでも視聴する事が出来ます

このプレイヤーの優秀なところは、DVRに対応しているという事。その他にも多くのプラグインに対応しているので、色々と使えそうです

とりあえずサンプルのVODページを作成してみました(再生出来ない場合はリンク切れを起こしてるかもしれません・・・)

作り方は非常に簡単で、以下のタグを表示したいWebサーバーに追加するだけです

まず、ヘッダーに以下の文字列を追加します

<script type=text/javascript src=https://cdn.jsdelivr.net/clappr/latest/clappr.min.js></script>

次に、表示したいページに以下のタグを追加します

<div id=player></div>

<script> var player = new Clappr.Player({source: http://your.video/here.mp4, parentId: #player}); </script>

変更をするのは、http://your.video/here.mp4の部分です

ここに再生したいHLSのURLを記入します(例:http://~.m3u8まで)

もしも再生が出来ない、という場合は以下の原因が考えられます

・HLSで使用不可能なフォーマットを使っている(例:音声にMP3など)

・Wowza側にCORSの設定がされていない

・そもそもタグが閉じられていない

CORSはCross-Origin Resource Sharingの略で、WowzaとWebサーバーが別のところにある場合に発生します

この辺を読んでみると分かりやすいかもしれません

要するに、Wowzaから出てくるデータをWebサーバー経由で出す場合にWowzaでCORSの設定をしないといけないという話です

WowzaでCORS設定

WowzaのCORS設定は、Wowza4.4からWebインターフェース上から操作して設定できるようになりました

Cors

各アプリケーション内の設定からチェックボックスを入れ、サーバーの再起動を行うだけで完了します

この設定はLiveだけでなくVODでも当然有効に出来るので、配信で使用するアプリケーションごとに設定を行いましょう

これでWowzaを使った配信までの流れの説明は終わります

次回からはWowzaを使った大規模配信向けのロードバランシングとかを掲載しようと思います

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする