1

我想在使用Durandal框架构建的单页应用程序上使用 jwplayer。这个想法是创建一个不受应用程序导航影响的持久音频播放器。但我无法在 Durandal 中加载 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 模块中无法识别。是什么导致了这个问题？如何在 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 回答