在Durandal中加載jwplayer

Question

我想在使用Durandal框架構建的Single Page App上使用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" 
     }] 
     }); 
    } 
    }; 
});