Nobody:Place

1. インストール

ダウンロードはこちらから[2]。

JW FLV Media Player | LongTail Video | Home of the JW Player

解凍するとファイルが6つ出てきますが、必要なのは次の2つのみ。

• player.swf
• swfobject.js

本体は3.xの時に比べると若干大きくなっていますが、
それでも42KBしかありません。すごい。
「swfobject.js」の方は既に使用されていれば改めてインストールする必要はありません。

配置は後で変更出来るので適当な場所でOKです。
今回はとりあえず次のように配置しました。

2. コードを入力する

ある程度後方互換があるので、3.xと同じ配置の仕方でも十分動きます。

以下は同梱されているサンプルにならったコードです（サンプル1）。

<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
  var s1 = new SWFObject("/static/swf/jw/player.swf","ply","328","200","9","#FFFFFF");
  s1.addParam("allowfullscreen","true");
  s1.addParam("allowscriptaccess","always");
  s1.addParam("flashvars","file=/static/movie/ichiro.flv&image=/static/movie/ichiro_thumb.jpg");
  s1.write("container");
</script>

3.xの時とほぼ同じですが、
設定を「flashvars」と言う名前で一気に渡しているところが違います。

これは、以下のように書いても同じように動きます（サンプル2）。

<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
  var s1 = new SWFObject("/static/swf/jw/player.swf","ply","328","200","9","#FFFFFF");
  s1.addParam("allowfullscreen","true");
  s1.addParam("allowscriptaccess","always");
  s1.addVariable("file","/static/movie/ichiro.flv");
  s1.addVariable("image","/static/movie/ichiro_thumb.jpg");
  s1.write("container");
</script>

また、embedタグを使って以下のように書くことも出来ます（サンプル3）。

<embed name="player1" id="player1"
  type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  width="320" height="240"
  bgcolor="#FFFFFF"
  src="/static/swf/jw/mediaplayer4.swf"
  allowfullscreen="true"
  allowscriptaccess="always"
  flashvars="file=/static/movie/ichiro.flv&image=/static/movie/ichiro_thumb.jpg">
</embed>

embedタグを利用して書いた場合は、JavaScriptを使用しないので、
「swfobject.js」をインストールする必要もありませんし、
JavaScriptがオフでも動作します。


また下記のサンプルのようにページロード時にプレイヤーを生成するということも出来ます[3]。

サンプル4

それぞれお好みでどうぞ。

3. 発展的な使い方（上級者向け）

以上までで、動画や音声ファイルの再生は十分に可能ですが、
さらにオプションとして次のような機能を持っています。

• プレイリストから再生するファイルを読み込む
• JavaScriptを使ってプレイヤーを操作する
• スキンを使って外装を変えてみる
• プラグイン、モジュールでもっと便利に

プレイリストから再生するファイルを読み込む

プレイリストは、3.xで対応していたXSPF、RSS、ASXに加えて、
SMIL、ATOMにも対応しています。
詳しい仕様については、こちらを参考にしてください。

FlashFormats -- JW Player -- Trac


以下は、XSPF形式でのサンプルです。

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
  <track>
    <title>組曲「ニコニコ動画」1.5倍速</title>
    <creator>original: しも</creator>
    <location>http://www.nobodyplace.com/mp3/kumikyoku_niconico_150.mp3</location>
    <info>http://www.nobodyplace.com</info>
  </track>
  <track>
    <title>組曲「ニコニコ動画」2倍速</title>
    <creator>original: しも</creator>
    <location>http://www.nobodyplace.com/mp3/kumikyoku_niconico_200.mp3</location>
    <info>http://www.nobodyplace.com</info>
  </track>
  <track>
    <title>組曲「ニコニコ動画」4倍速</title>
    <creator>original: しも</creator>
    <location>http://www.nobodyplace.com/mp3/kumikyoku_niconico_400.mp3</location>
    <info>http://www.nobodyplace.com</info>
  </track>
  </trackList>
</playlist>

embed形式でこれを読み込むコードは下記の通りです（サンプル5）。
（プレイリストの表示に関する設定も追加しています）

<embed name="player1" id="player1"
  type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  width="320" height="200"
  bgcolor="#FFFFFF"
  src="/static/swf/jw/mediaplayer4.swf"
  allowfullscreen="true"
  allowscriptaccess="always"
  flashvars="file=/mp3/kumikyoku_niconico.xml&image=/static/movie/ichiro_thumb.jpg&playlist=bottom">
</embed>

JavaScriptを使ってプレイヤーを操作する

4.xになって、操作の方法がだいぶ楽になった印象を受けます。

先ほどのプレイリストを参考に2曲目を再生するコードを書いてみると、
これだけで足ります（サンプル6）。

<a href="javascript:document.getElementById('player1').sendEvent('ITEM', 1);">2曲目を再生</a>

実際に貼り付けてみるとこんな感じ。

2曲目を再生

「player1」がプレイヤーのID、「ITEM」がプレイヤーへの指示、「1」が順番の指定です。
特にライブラリを作成する必要はありません[4][5]。


応用すれば、別のファイルやプレイリストを読み込んだり、
再生を停止したり、次の曲や1つ前の曲に移動したりすることも簡単にできます。
詳しくは、こちらを参考にしてみてください。

FlashEvents -- JW Player -- Trac

スキンを使って外装を変えてみる

4.xで大きく変わったのは、スキンへの対応かもしれません。
デフォルトのデザインは、プレイリストの文字が大きくなってしまいましたが、
スキンを上手く使えば調整することが出来ます。

スキンは、検索すればいくつか出てきますし、
公式ページにも多くのスキンが公開されています。

AddOns | Skins | LongTail Video | Home of the JW Player

スキンを使うには、スキンファイルをダウンロードしてきた上で、
設定として読み込んでやればOKです。

例えば上記ページで公開されている「Playcasso」というスキンを適用してやるには、
スキンをダウンロードしてきて適当な場所に配置したのち、
次のように設定してやればOKです（サンプル7）。

<embed name="player1" id="player1"
  type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  width="320" height="240"
  bgcolor="#FFFFFF"
  src="/static/swf/jw/mediaplayer4.swf"
  allowfullscreen="true"
  allowscriptaccess="always"
  flashvars="file=/static/movie/ichiro.flv&image=/static/movie/ichiro_thumb.jpg&skin=/static/swf/jw/skins/playcasso.swf">
</embed>

実際に貼ってみるとこんな感じです。



なかなか個性的なスキンが揃っているので、
試してみると雰囲気が変わって良いかと思います。

プラグイン、モジュールでもっと便利に

上であげたスキンの他、多くのアドオンが公開されて、
それらを上手く使うとかなりいろいろなことが出来るようです。

AddOns | Plugins | LongTail Video | Home of the JW Player
AddOns | Modules | LongTail Video | Home of the JW Player

例えば...RateItというプラグインを使用すると、
自分の動画を評価してもらえるようになります。

導入に当たっては、特に何かをダウンロードする必要はなくて、
この場合は次のコードを追加するだけでOKです（サンプル8）。

<embed name="player1" id="player1"
  type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  width="320" height="240"
  bgcolor="#FFFFFF"
  src="/static/swf/jw/mediaplayer4.swf"
  allowfullscreen="true"
  allowscriptaccess="always"
  flashvars="file=/static/movie/ichiro.flv&image=/static/movie/ichiro_thumb.jpg&title=VideoTitle&plugins=rateit-1">
</embed>

これで自動的にプラグインを読み込み、動画上に配置してくれます。

実際に貼ってみるとこんな感じ。


動画を一時停止するか、ディスプレイにマウスを合わせると、
評価のためのツールが表示されるのがわかると思います。

これは凄いｗ




4.xになってドキュメントも膨大になり、
ちょっととっつきにくい感じのものになってしまいましたが、
よくよく見てみると案外シンプルで、
使い方によっては以前より簡単に使えるようになっています。

色々と試してみると面白いと思います。




[註]

1. FLVを再生する方法については以前、記事を2つ書いています。
   
   FLVをWEB上で再生する（その2）
   FlashVideoをWEB上で再生する。
   
   特にその2の「JW FLV Media Player」については僕自身もかなり便利に使わせていただいていて、作者のJeroen Wijeringには非常に感謝しています。 が、3.xから4.xに移行した際にいくつか仕様が変わって、便利になったところもあれば、便利なんだろうけど戸惑うところもあったりしたので、その辺に考慮しつつ再度まとめてみました。
2. 会社を起こしてサイトを移転したために、ドメインが変わっていますが、Jeroen Wijeringが開発に関わっていることには変わりがないようです。 （不安になる人も多いらしくてFAQの一番最初に書いてありますｗ）
3. この実行には、swfobject.js ver2以降が必要です。同梱されているswfobject.jsはver1.5なので、別途ダウンロードしてインストールする必要があります。 swfobject.jsのダウンロードはこちらから。
   swfobject - Google Code
4. もちろん、応用が利くように考えるのであれば、コントローラをまとめたライブラリを用意した方が便利だと思います。
5. embed形式で貼り付けるとどうも上手く動かないようです。swfobject.jsを使った形式で貼り付ける方が無難かもしれません。どうせJavaScript使うわけですし。