在Durandal中加载jwplayer

Question

我想在一个使用杜兰达尔框架构建的页面应用程序上使用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

看起来，在Durandal模块中，player元素是不可识别的。是什么导致了这个问题？如何在Durandal模块中添加jwplayer？

Answer 1

正如您已经知道的，当代码执行时，似乎无法识别player元素。当模块第一次加载时，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"
        }]
      });
    }
  }; 
});