1

Durandalフレームワークを使用して構築されたシングル ページ アプリで jwplayer を使用したいと考えています。アイデアは、アプリケーションのナビゲーションに影響されない永続的なオーディオ プレーヤーを作成することです。しかし、デュランダルで jwplayer を読み込めませんでした。

Require.js を使用して、単純な html ファイルに jwplayer を正常にロードしました。しかし、この方法は Durandal (Require.js も使用) では機能しないようです。

これはshell.jsの私のコードです:

define(['jwplayer/jwplayer','durandal/plugins/router','durandal/app'], function (jwplayer,router,app) {

  jwplayer.api('player').setup({
    width: '320',
    height: '40',
    sources: [{
        file: "rtmp://127.0.0.1:1935/vod/mp3:sample_1.mp3"
    },{
        file: "http://127.0.0.1:1935/vod/sample_1.mp3/playlist.m3u8"
    }]
  });

  return {
    router: router,
    activate: function () {
        ...
    }
  }; 
});

そして、shell.html内には次のコードがあります。<div id="player">loading player...</div>

これは私が得るエラーメッセージです:

Uncaught TypeError: Cannot read property 'id' of null jwplayer.js:37

player要素がデュランダル モジュール内で認識できないようです。この問題の原因は何ですか? Durandal モジュール内に jwplayer を追加するにはどうすればよいですか?

4

1 に答える 1

4

すでにわかっているように、コードの実行時にプレーヤー要素が認識されないようです。モジュールが初めてロードされるとき、DOM は確実に準備ができていません。activate() コールバック関数の実行中は、準備ができていない可能性さえあります。jwplayer をセットアップする適切なタイミングは、おそらく viewAttached() コールバックです。

viewAttached コールバックの詳細については、コンポジション コールバック セクションを参照してください: http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks/

このようなもの：

define(['jwplayer/jwplayer','durandal/plugins/router','durandal/app'], function (jwplayer,router,app) {

  return {
    router: router,
    activate: function () {
        ...
    },
    viewAttached: function(){
      jwplayer.api('player').setup({
        width: '320',
        height: '40',
        sources: [{
            file: "rtmp://127.0.0.1:1935/vod/mp3:sample_1.mp3"
        },{
            file: "http://127.0.0.1:1935/vod/sample_1.mp3/playlist.m3u8"
        }]
      });
    }
  }; 
});
于 2013-04-04T18:50:05.170 に答える