Requirejs 在Durandal中加载jwplayer

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

我已经成功了。但是这个方法在Durandal上似乎不起作用（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中，我有一个代码：

加载播放器…

这是我收到的错误消息：

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

---

在Durandal模块中，

player

元素似乎无法识别。是什么导致了这个问题？如何在Durandal模块中添加jwplayer？

正如您已经了解的，在代码执行时，似乎无法识别player元素。当模块第一次加载时，DOM肯定还没有准备好。在activate（）回调函数期间，它甚至可能还没有准备好。设置jwplayer的正确时机可能是在viewAttached（）回调中

您可以在“合成回调”部分中阅读有关viewAttached回调的更多信息：

大概是这样的：

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"
        }]
      });
    }
  }; 
});

---

正如您已经发现的，在代码执行时，似乎无法识别player元素。当模块第一次加载时，DOM肯定还没有准备好。在activate（）回调函数期间，它甚至可能还没有准备好。设置jwplayer的正确时机可能是在viewAttached（）回调中

您可以在“合成回调”部分中阅读有关viewAttached回调的更多信息：

大概是这样的：

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"
        }]
      });
    }
  }; 
});

---

非常感谢你，这个很好用。我还想知道DOM是否导致了这个问题，但我对Durandal修复这个问题的回调并不太了解。我还想知道DOM是否导致了这个问题，但我对Durandal修复这个问题的回调并不太了解。