JavaScriptでJW Playerを制御する

JavaScript

忘れないうちにメモ。JW PlayerはFlashを使った動画・音声プレーヤー。

下ごしらえ

まず window.playerReady という関数を作りプレーヤーのオブジェクトを取得する。

var player;
window.playerReady = function(obj) {
    player = document.getElementById(obj.id);
};

こうやっておいて、player に対していろいろと操作を行う。

イベントを受け取る

プレーヤーに対するイベントリスナは次の関数で指定する。関数はグローバルから呼べないといけない。

  • player.addControllerListener(EVENT, funcName)
  • player.addModelListener(EVENT, funcName)
  • player.addViewListener(EVENT, funcName)

イベントのパラメータは第1引数に連想配列として渡される。

function muteTracker(obj) { alert('the new mute state is: '+obj.state); };
player.addControllerListener("MUTE","muteTracker");

イベントの一覧はココ！

EVENTにはイベント一覧にある ControllerEvent.なんとか とか ModelEvent.なんとか とか ViewEvent.なんとか とかの大文字の部分を指定する。
(3月25日追記) Firefox 3.5において、イベントリスナの中でエラーが起こってもエラーコンソールやFirebugのコンソールに表示されません。そこで実際に処理を行う関数を別に作り、setTimeout を使って呼び出すことで対処できます。

イベントを送る

これで送れる。パラメータは文字列で渡すこと！

  • player.sendEvent(EVENT, param)

サンプルコード（今つくってるやつ）

// gbuc-slidwshow.js
// requires: jquery

var GBUCSlideshow = (function() {
    var app;
    var player;
    
// Member
    
return {
    init: function() {
        app = this;
        
        // 仮
        initPlayer({ file: 'http://gbuc.net/uploads/exphotos/12667.mp3', duration: '2:58' });
    },
    
    playerReady: function(obj) {
        // この player に対して操作を行う
        // player.getConfig() でさまざまな情報を得られる
        player = document.getElementById(obj.id);
        // Controller/Model/View に対するイベントリスナを設定
        // グローバルから呼べないといけない
        player.addModelListener("STATE", "GBUCSlideshow.stateChange");
        // player.sendEvent(EVENT, param) で
        setTimeout(function(){ player.sendEvent("SEEK", "150"); }, 5000);
    },
    
    stateChange: function(obj) {
        console.log(obj.oldstate, obj.newstate);
        if (obj.newstate == "COMPLETED") {
            console.log("Next song...");
        }
    }
};

// Static

    function initPlayer(param) {
        var so = new SWFObject('/common/jwplayer.swf','mpl','320','24','9');
        so.addParam('allowfullscreen','false');
        so.addParam('allowscriptaccess','always');
        so.addParam('wmode','opaque');
        so.addVariable('duration',param.duration);
        so.addVariable('file',param.file);
        so.addVariable('autostart','true');
        so.write('player');
    }
})();

$(function() {
    GBUCSlideshow.init();
    
    window.playerReady = function(obj) { GBUCSlideshow.playerReady(obj); };
});