Carpe Diem

備忘録

JW PlayerでRTMPストリーミングを再生する

概要

前回はサーバ側を実装したので今回はクライアント側を実装します。
JW Playerというプレーヤを使うと簡単に再生ができます。
以下の様なプレイリスト表示をするのが今回の完成形です。

f:id:quoll00:20150112234728p:plain

環境

  • 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を使えるようにします。以下のサイトでユーザ登録をしてください。

JWPlayer

メールアドレスを登録するとメールが来てアクティベーションを求められます。リンクをクリックしてアクティベートしましょう。
アクティベート後、以下のアドレスで自分のプレーヤを確認します。

https://account.jwplayer.com/#/account

f:id:quoll00:20150112233709p:plain

上図のように

  • JW Playerのリンクから利用する
  • ダウンロードして利用する

の2通りがあります。用途に合わせて選びましょう。今回は簡単のため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

の3つを組み合わせたパスが必要です。なので上記のように設定してください。

動作確認

再生前はimageに指定した画像が表示されます。ただimageはなくても問題ありません。

f:id:quoll00:20150113100226p:plain

再生するとこんな感じですね。

f:id:quoll00:20150113100246p:plain

ちなみにJW Playerのロゴは年間$149払わないと消えません。

プレイリストを作成(RSS

次にプレイリストを作成します。プレイリストは

  • 直接羅列する
  • .rssファイルで指定する

の2通りがあります。今回は.rssでやります。
以下の様な.rssファイルを作成します。名前は適当にplaylist1.rssとでもしておきましょう。

<rss version="2.0" xmlns:jwplayer="http://rss.jwpcdn.com/">
<channel>

  <item>
    <title>タイトル1</title>
    <description>説明文1</description>
    <jwplayer:image>/assets/image1.jpg</jwplayer:image>
    <jwplayer:source file="rtmp://localhost/live/mp4:group1/test1.mp4" />
  </item>
  <item>
    <title>タイトル2</title>
    <description>説明文2</description>
    <jwplayer:image>/assets/image2.jpg</jwplayer:image>
    <jwplayer:source file="rtmp://localhost/live/mp4:group1/test2.mp4" />
  </item>
  <item>
    <title>タイトル3</title>
    <description>説明文3</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はプレイリストバーの分増やしておきましょう。

動作確認

以下のように表示されるようになります。

f:id:quoll00:20150113101402p:plain

以上です。お疲れ様でした。

参考