在MediaElement播放器中動態添加播放列表項目

Question

目前，我可以使用mep-feture-playlist插件使用靜態HTML代碼將媒體項目添加到播放列表。

<video id="player" controls="controls" poster="media/poster.jpg" width="540" height="400"> 
    <Source src="media/video1.mp4" title="video1" type="video/mp4"></Source> 
    <Source src="media/flashMovie.flv" title="Flash File" type="video/flv"></Source> 
</video> 

但是，我想要動態地添加播放列表項目使用jQuery或JavaScript。我有媒體src和類型的JSON對象。

感謝您的幫助提前。

Answer 1

您可以簡化您的出發DOM

<video id="player" controls="controls" poster="media/poster.jpg" width="540" height="400"></video> 

然後你就可以追加JSON來DOM對象

var someJson = [ 
    { 
     'media_src': 'http://www.test.com/movie.mp4', 
     'type': 'video/mp4', 
     'title': 'mp4' 
    }, 
    { 
     'media_src': 'http://www.test.com/movie.flv', 
     'type': 'video/flv', 
     'title': 'flv' 
    }, 
    { 
     'media_src': 'http://www.test.com/movie.ogg', 
     'type': 'video/ogg', 
     'title': 'flv' 
    } 
]; 

// create an object that you can clone and add data to 
var sourceObject = $('<source />'); 

// iterate thru the json 
$.each(someJson, function (index_someJson, value_someJson) { 

    // clone the original object 
    var thisSourceObject = sourceObject.clone(); 

    // give it attributes based on the json item 
    thisSourceObject.attr({ 
     'src': value_someJson.media_src, 
     'type': value_someJson.type, 
     'title': value_someJson.title 
    }); 

    // append this to the '#player' element 
    $('#player').append(thisSourceObject); 

}) 

console.log($('#player')[0]) 

Answer 2

使用jQuery .append http://api.jquery.com/append/

jQuery("#player").append("<Source src=\"media/newfile.flv\" title=\"new title\" type=\"video/flv\"></Source>"); 

對於一個JSON對象，你可以使用foreach循環，幫助建立這個HTML的追加聲明。