如何使用 mediaelement.js 获取 HTML5 音频播放列表？答案

【问题标题】：How can i get HTML5 audio playlist with mediaelement.js ?如何使用 mediaelement.js 获取 HTML5 音频播放列表？
【发布时间】：2011-06-18 10:08:09
【问题描述】：

我尝试在 mediaelement.js 中搜索音频播放列表的示例。但我没有找到，mediaelement.js 是否支持音频播放列表？如果是这样，请支持我的示例代码或链接。非常感谢。

【问题讨论】：

标签： mediaelement.js playlist playlists

【解决方案1】：

我设法获得了一个在 WordPress 主题中工作的播放列表的超级基本（阅读：hacky）演示。您所要做的就是使用一组 ID、一个类或在本例中为 <audio> 标签设置多个媒体元素。

然后你可以使用 JS 来查看播放器何时结束（停止播放音乐）并运行一些基本条件来查看哪个播放器正在播放，下一个应该播放哪个播放器，如果没有下一个播放器，则从头开始.同样，这非常hacky，但它似乎对我有用。

HTML：

<figure class="entry-audio">
    <audio id="wp_mep_1" controls="controls">
        <source src="linkto/music.mp3" type="audio/mp3" />
        <object width="100%" height="23" type="application/x-shockwave-flash" data="flashmediaelement.swf">
            <param name="movie" value="flashmediaelement.swf" />
            <param name="flashvars" value="controls=true&amp;file=linkto/music.mp3" />
        </object>
    </audio>
</figure>
<!-- .entry-audio -->

<figure class="entry-audio">
    <audio id="wp_mep_2" controls="controls">
        <source src="linkto/music.mp3" type="audio/mp3" />
        <object width="100%" height="23" type="application/x-shockwave-flash" data="flashmediaelement.swf">
            <param name="movie" value="flashmediaelement.swf" />
            <param name="flashvars" value="controls=true&amp;file=linkto/music.mp3" />
        </object>
    </audio>
</figure>
<!-- .entry-audio -->

<figure class="entry-audio">
    <audio id="wp_mep_3" controls="controls">
        <source src="linkto/music.mp3" type="audio/mp3" />
        <object width="100%" height="23" type="application/x-shockwave-flash" data="flashmediaelement.swf">
            <param name="movie" value="flashmediaelement.swf" />
            <param name="flashvars" value="controls=true&amp;file=linkto/music.mp3" />
        </object>
    </audio>
</figure>
<!-- .entry-audio -->

JavaScript：

jQuery(function (jQuery) {
    // make an array for the mediaelement players
    var mediaElementPlayers = new Array();

    // run mediaelement.js (Ignore options)
    jQuery('audio').mediaelementplayer({
        iPadUseNativeControls: false,
        iPhoneUseNativeControls: false,
        AndroidUseNativeControls: false,
        pauseOtherPlayers: true,
        success: function (mediaElement, domObject) {
            // add this mediaelement to the mediaElementPlayers array
            mediaElementPlayers.push(mediaElement);
            console.log(mediaElement);
            mediaElement.addEventListener('ended', function (e) {
                playNext(e.target);
            }, false);
        },
        keyActions: []
    })

    // find the current player and start playing the following player
    function playNext(currentPlayer) {
        for (i = 0; i < mediaElementPlayers.length; i++) {
            if (mediaElementPlayers[i] == currentPlayer) {
                if (mediaElementPlayers[i + 1] == undefined) { // If this is the last player Start from the beginning
                    mediaElementPlayers[0].play();
                } else { // Start the next player
                    mediaElementPlayers[i + 1].play();
                }
            }
        }
    }
});

【讨论】：

【解决方案2】：

不，没有播放列表。如果您正在寻找拥有一台的播放器，请在此处查看：http://praegnanz.de/html5video/ 此外，您只需使用 mediaelementjs JavaScript API 即可轻松制作播放列表。这是一个非常简单的任务，IMO 不需要额外的支持。

【讨论】：