概要
前回はサーバ側を実装したので今回はクライアント側を実装します。
JW Playerというプレーヤを使うと簡単に再生ができます。
以下の様なプレイリスト表示をするのが今回の完成形です。
環境
- Ubuntu 14.04
- Nginx 1.7.9
- JWPlayer 6.11
フォルダ構成
わかりやすくするために動画ファイルのフォルダ構成を以下のようにしておきます。
html/
├── 50x.html
├── assets
│ ├── image1.jpg
│ ├── image2.jpg
│ └── image3.jpg
├── index.html
├── playlists
│ └── playlist1.rss
└── video
├── group1
│ ├── video1.mp4
│ ├── video2.mp4
│ └── video3.mp4
└── group2
├── video1.mp4
├── video2.mp4
└── video3.mp4
サーバサイドの設定
前回と同様です。
以下のように/usr/local/nginx/html/videoを動画ファイルのルートフォルダにしています。
application live {
play /usr/local/nginx/html/video;
live on;
record off;
}
クライアントサイドの設定
まずJW Playerを使えるようにします。以下のサイトでユーザ登録をしてください。
メールアドレスを登録するとメールが来てアクティベーションを求められます。リンクをクリックしてアクティベートしましょう。
アクティベート後、以下のアドレスで自分のプレーヤを確認します。
https://account.jwplayer.com/#/account
上図のように
- JW Playerのリンクから利用する
- ダウンロードして利用する
の２通りがあります。用途に合わせて選びましょう。今回は簡単のためJWPlayerのリンクを貼る方にします。
※Webサイト自体がSSLを使用している場合、リンクは
<script src="https://jwpsrv.com/library/<token>.js"></script>
の形にしてください。ドキュメントのhttps://ssl.jwpsrv.com/は古い情報で使えませんでした。
JW Playerで再生してみる
まずはプレイリストなど余分なものはなしで、とりあえず再生してみましょう。
下記のようなindex.htmlを作成してください。
<token>の部分を先ほど登録した自分のプレーヤに置き換えます。
<!DOCTYPE html> <html> <head lang="ja"> <meta charset="UTF-8"> <title></title> <script src="http://jwpsrv.com/library/<token>.js"></script> </head> <body> <div id="myElement"></div> <script type="text/javascript"> jwplayer("myElement").setup({ file: "rtmp://localhost/live/mp4:group1/video1.mp4", image: "/assets/image1.jpg", width: 640, height: 360 }); </script> </body> </html>
解説
fileのパスが注意です。JWPlayerでは
- ストリーミングのルートパス：
rtmp://localhost/live/ - 動画のストリーミング識別子：
mp4: - 動画のファイルパス：
group1/video1.mp4
の３つを組み合わせたパスが必要です。なので上記のように設定してください。
動作確認
再生前はimageに指定した画像が表示されます。ただimageはなくても問題ありません。
再生するとこんな感じですね。
ちなみにJW Playerのロゴは年間$149払わないと消えません。
プレイリストを作成（RSS）
次にプレイリストを作成します。プレイリストは
- 直接羅列する
.rssファイルで指定する
の２通りがあります。今回は.rssでやります。
以下の様な.rssファイルを作成します。名前は適当にplaylist1.rssとでもしておきましょう。
<rss version="2.0" xmlns:jwplayer="http://rss.jwpcdn.com/"> <channel> <item> <title>タイトル１</title> <description>説明文１</description> <jwplayer:image>/assets/image1.jpg</jwplayer:image> <jwplayer:source file="rtmp://localhost/live/mp4:group1/test1.mp4" /> </item> <item> <title>タイトル２</title> <description>説明文２</description> <jwplayer:image>/assets/image2.jpg</jwplayer:image> <jwplayer:source file="rtmp://localhost/live/mp4:group1/test2.mp4" /> </item> <item> <title>タイトル３</title> <description>説明文３</description> <jwplayer:image>/assets/image3.jpg</jwplayer:image> <jwplayer:source file="rtmp://localhost/live/mp4:group1/test3.mp4" /> </item> </channel> </rss>
作ったらアクセスできるフォルダに置きます。今回は前述のフォルダ構成の通りに
/usr/local/nginx/html/playlists/
に置くことにします。
プレイリストを作成したら今度はプレーヤの設定を修正します。
<script type="text/javascript"> jwplayer("myElement").setup({ playlist: "/playlists/playlist1.rss", listbar: { position: "right", size: 200 }, width: 840, height: 360 }); </script>
解説
playlist: "playlists/playlist1.rss",
こちらはプレイリストファイルの場所を指定します。
listbar: {
position: "right",
size: 200
},
こちらはプレイリストの一覧を表示するためのリストバーです。
ポジションやサイズ等指定できます。
またwidthはプレイリストバーの分増やしておきましょう。
動作確認
以下のように表示されるようになります。
以上です。お疲れ様でした。
