在 Durandal 中加载 jwplayer

Question

我想在使用Durandal 框架构建的单页应用程序上使用 jwplayer。这个想法是创建一个不受应用程序导航影响的持久音频播放器。但是我一直无法在 Durandal 中加载 jwplayer。

我已经成功loaded jwplayer on a simple html file using Require.js。但是这种方法似乎不适用于 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？

Answer 1

正如您已经发现的那样，在执行代码时似乎无法识别播放器元素。当模块第一次加载时，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"
        }]
      });
    }
  }; 
});