JWPlayerを埋め込みプレーヤーとして使う

Plug-in, Tips, Wordpress

JWPlayer

(注:2014.02.10)現在サイトでJWPlayerは使用していません。これは導入していた時の覚書です。予めご了承ください。m(_ _)m

 

サイトに上げている宅録音源はこれまでmp3の楽曲データのみで、2003年にサイトを立ち上げて以降このmp3をQiucktimeファイルとしてobjectで埋め込むという方式を取っていた。1年ほど前にMediaElement.jsというプラグインに切り替え、更に最近になってhtml5のaudioタグに置き換える…という具合にだんだん汎用性が高くてシンプルなものにしてきた。
 

動画を作り始めた

2013年。年明けと同時にビートルズのホワイトアルバムに取り掛かったのに合わせて、宅録曲を使った動画の製作が楽しくなってきた。
動画を作り始めたのは実はリボルバーの頃。この時は「動画」と言ってもページのサムネイル画像をパンさせるだけという至極簡単なものだった。
次のアルバム、サージェント・ペッパーではサムネイル画像とiTunesのビジュアライザを合成することで画面に少し意味のある動きを持たせ、その次のマジカル・ミステリー・ツアーでは2曲目以降歌詞のテロップを入れてみた。
ホワイトアルバムはバンドサウンドっぽい曲が多いので、演奏風景を入れてみたらどうだろうと思い立ち、録音前後に練習してる時や録音している時ににiphoneで自分撮りをし、これを編集して最終的なサウンドトラックと重ねる、という感じで作ってみた。

これが思った以上に面白い。

で、せっかく面白いものができたので、曲のページにYouTubeのコンテンツを埋め込んでいたのだが…。
 

動画ファイルがあれば楽曲のみデータはいらないよね

楽曲ファイルを埋め込んだページは開くと同時に曲が再生されるようになっていた。
これは再生用のプレーヤーが小さくて見つけにくいので、ページを見に来てくれた人に気がついてもらえないんじゃないかと思ったからだ。
いきなり音が出るページというのは基本的には迷惑になるので最初はためらったが、最終的には自己顕示欲が勝ってしまったわけだ。

で、ページにYouTubeの動画を埋め込んだのはいいが、動画を再生するとここからも音が出てしまうので一旦楽曲プレーヤーの再生を止めてもらわなくてはならない。

手間だ。ユーザーフレンドリーじゃない。

それともうひとつ問題が。
あわてんぼうの僕はあまり細かいチェックをせずにYouTubeに上げてしまう。で、上げた後にテロップの間違いに気付く。気がついたら修正して動画ファイルを作り直すのだが、YouTubeに上げてしまったものはどうすることもできない。今までのものを非公開または削除して、新たに上げるしかない。

手間だし、なんかスッキリしない。

なら動画もYouTubeから引っ張ってくるんじゃなくて自分のサイトに置いて最新版管理すればいい。もともと自分で作ってるんだし。
でも動画の掲載ってどうすりゃいいんだろう?
 

IEの壁

html5にはvideoタグがある。

で動画を埋め込んでくれるというタグだ。
便利なタグがあるもんだ…ところが、そう簡単にはいかないのだ。

画像なら

でどんなブラウザでも表示してくれる。ところが動画の場合はブラウザ毎で対応しているフォーマットがバラバラなのだ。

そこでまず640×360の動画をmp4、ogv、webmの3形式で用意する。
1本の動画にファイル3つ…と、この時点でちょっと萎え気味なのをグッとこらえて、次のようなコードを書いてブラウザでチェックしてみた。

しかしIE9がダメだ。他のブラウザでは問題ないのに、IEだけがダメ。
mp4に対応しているはずなのに表示されない。

よくよく調べてみると、IEはmp4の音声トラックがmp3でコーデックされてないと開いてくれないらしい。
今mp4は.H264/AACというのが一般的。いくつかソフトを当たったがmp3でちゃんと変換してくれるものなんてありゃしない。
仕方がないのでここでさらにflashファイル(flv)を用意してieの時だけ切り替えることにした。

対応ブラウザを考えればflashオンリーというのが一番いいのだが、これだとiosとandroidが非対応になってしまう。mp4は不可欠だ。
で、どうせflashにするなら用意するのはmp4とflvだけでいいやということでogvとwebmはサーバーから削除。

flashのプレーヤーにはflv playerというものを使ってみた。
flvplayer

プレーヤー本体は画面右の”Download”からダウンロード出来る。たった1つのswfファイルだ。ミニマルで好印象。これをサーバーにアップロードする。
サイト上で埋め込み用のコードはflv playerのページで生成できる。
これを先ほどのコードの「html5非対応のブラウザでの表示」のエリアに貼り付けると、「mp4の動画ファイルを表示できないブラウザではflvを開いてね」という構文になる。

flashだからもう大丈夫だろうと思ったんだけど、しかしこれもIEは表示してくれない。

いったい何が不満なんだ。
 

JW Playerという選択

JWPlayer

videoタグだけではどうしようもなさそうなので、「html5対応のブラウザではmp4、それ以外ではflashで表示する」という外部ツールを使うことにした。こういうのを”fallback”というらしい。
一旦引っ込めていたMediaElement.jsもfallbackできるんだけど、何故かプレーヤーがうまく表示されない。
あれこれ探して、IEでちゃんとコンテンツが表示できたJW Playerを使うことにした。

wordpress用のプラグインもあるのだが、ショートコードで書くと動画ファイルをメディアライブラリから引っ張ってこようとするインターフェースがどうも気に入らなくて独立して入れることにした。
その方が後からあれこれ弄り回すのにも好都合だし。

JWPlayerのHPからプログラムをDL。デフォルトの構成ファイルはreadmeを含めて4つ。意外と少ない。これをフォルダごと自分のサイトにアップロードする。

次にテンプレートのheaderに

を追記。”jwplayer.key”はJWPlayerのアカウントを取得するともらうことができる。

基本の埋め込みコードは

これを自分の環境に合わせてカスタマイズすればよい(具体例は後述)。

用意する動画ファイルはm4vでもいいようだ。m4vはiMovieの「ムービーを書き出す」で出力される形式なのでその後また何かのツールをかます必要がない。僕にとってはありがたい話だ。しかしm4vのMIMEタイプをVideo/mp4で設定しておかないとIEでfallbackできないようなので、.htaccess等々で設定しておくのを忘れずに。僕が使ってるsixcoreは「サーバー管理ツール」にMIME設定の項目があるのでここに追記する。
また、headerの文頭に

の宣言をしておかないとやはりIEでコケるもとになるようなので、これも注意。

テストの結果は上々。IEの壁をようやく超えることができて、これで全ての環境で動画が開ける環境が整った。
 

サムネイルをポスターフレームとして使って、音声プレーヤーも大きくする

JW Playerをmp3プレーヤーとして使う時、imageパラメータを指定すればそれをポスターフレーム(再生前に表示される画像)として使うことができる。
こうすれば音声プレーヤーも動画プレーヤーと同じ大きさにできる。
プレーヤーが大きくなれば視認性が上がる。
視認性が上がれば、もう自動再生は必要ない。
jwplayer1

ここ数年間にアップした楽曲のページには、それに合わせて丹念に(^^;作った画像が貼ってある。ポスターフレームにはぜひこれを使いたいところだ。
ここで悩んだのが、如何にしてpost_thumbnailのURIを取得するか、ということ。

はURIではなくて

を貼りこんでしまうので使えない。

そこで

を用いて

と書いてみた。

見事、サムネイル画像付きのプレーヤーに変身した。
jwplayer3

動画の有無でページごとに表示を変える

IEの壁を乗り越えてからはなんかトントン拍子なので、もうひと頑張りする意欲が生まれてきた。

前述したように動画があるページで音声だけのプレーヤーを置く意味はなくなるので、この切り替えをやりたい。
プレーヤーの場所はサムネイル画像が表示されているところがよさそうだ。

このエリアを使って

  1. 動画ファイルがある場合は動画プレーヤー。ポスターフレームにサムネイル画像。
  2. 動画がなくて音声ファイルがある場合は音声プレーヤー。ポスターフレームにサムネイル画像。
  3. 動画も音声もない場合はサムネイル画像。

という切り分けをする。
動画ファイルや音声ファイルの有無をカスタムフィールドの値で制御すればこの切り替えを実装できる。
テンプレートのsingle.phpを開き、post_tumbnailを読み込んでいる部分を次のように書き換えた。

primary: flashのパラメーターはPCブラウザ対策。
これを記述しないとデフォルトのprimary: html5でせっとされるのだが、これだとブラウザが中途半端に読み込み始めて場合によっては途中でコケたりすることもあるのでflashにしておいたほうが無難。iOS系の時はfallbackでhtml5再生してくれるので問題ない。

これにて一件落着!

追伸:
twitterでテストに協力してくださった@ma_ru_master さん、@LeoTaros さん、@noboru_maruyama さん、
本当にありがとうございました。