在 MediaElement Player 中动态添加播放列表项答案

【问题标题】：Add playlist Items dynamically in MediaElement Player在 MediaElement Player 中动态添加播放列表项
【发布时间】：2015-09-15 03:49:44
【问题描述】：

目前我可以使用 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 对象。

提前感谢您的帮助。

【问题讨论】：

标签： javascript jquery mediaelement.js mediaelement

【解决方案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])

【讨论】：

【解决方案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。

【讨论】：