mediaelement.js 和自定义播放列表答案

【问题标题】：mediaelement.js and custom playlistmediaelement.js 和自定义播放列表
【发布时间】：2012-08-05 18:08:01
【问题描述】：

我有这样的代码（例如）：

<script>
$('audio').mediaelementplayer();
</script>

<audio id="mejs" controls="controls">
    <source src="/media/file-2.mp3" type="audio/mp3" />
</audio>

<ul class="mejs-list">
    <li>/media/file-1.mp3</li>
    <li class="current">/media/file-2.mp3</li>
    <li>/media/file-3.mp3</li>
</ul>

我需要按队列（一个接一个）播放列表中的音频文件。

如何在播放完当前文件后从列表中更改下一个文件的音频源并开始播放下一个文件？

更新：关于mediaelement.js and playlist 的相关主题，但答案是关于使用许多 mediaelementplayer() 实例。

【问题讨论】：

标签： mediaelement.js playlist playlists

【解决方案1】：

mediaelement.js 的基本播放列表制作代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 MediaElement</title>

<script src="../build/jquery.js"></script>
<script src="../build/mediaelement-and-player.min.js"></script>

<link rel="stylesheet" href="../build/mediaelementplayer.min.css" />

<style>
    .mejs-list li:hover {
        background: #ffa;
        cursor: pointer;
    }
    .mejs-list li.current {
        background: #cddfff;
    }
</style>

<script>
    $(function(){
        $('video,audio').mediaelementplayer({
            success: function (mediaElement, domObject) {
                mediaElement.addEventListener('ended', function (e) {
                    mejsPlayNext(e.target);
                }, false);
            },
            keyActions: []
        });

        $('.mejs-list li').click(function() {
            $(this).addClass('current').siblings().removeClass('current');
            var audio_src = $(this).text();
            $('audio#mejs:first').each(function(){
                this.player.pause();
                this.player.setSrc(audio_src);
                this.player.play();
            });
        });

    });

    function mejsPlayNext(currentPlayer) {
        if ($('.mejs-list li.current').length > 0){ // get the .current song
            var current_item = $('.mejs-list li.current:first'); // :first is added if we have few .current classes
            var audio_src = $(current_item).next().text();
            $(current_item).next().addClass('current').siblings().removeClass('current');
            console.log('if '+audio_src);
        }else{ // if there is no .current class
            var current_item = $('.mejs-list li:first'); // get :first if we don't have .current class
            var audio_src = $(current_item).next().text();
            $(current_item).next().addClass('current').siblings().removeClass('current');
            console.log('elseif '+audio_src);
        }

        if( $(current_item).is(':last-child') ) { // if it is last - stop playing
            $(current_item).removeClass('current');
        }else{
            currentPlayer.setSrc(audio_src);
            currentPlayer.play();
        }
    }
</script>

</head>

<body>

<audio id="mejs" src="../media/audio-01.mp3" type="audio/mp3" controls="controls"></audio>
<ul class="mejs-list">
    <li class="current">../media/audio-01.mp3</li>
    <li>../media/audio-02.mp3</li>
    <li>../media/audio-03.mp3</li>
</ul>

</body>
</html>

【讨论】：

【解决方案2】：

现在有一个插件可以解决这个任务 - https://github.com/duozersk/mep-feature-playlist

【讨论】：

有趣。很久以前就在找这个。感谢分享:)
像魅力一样工作。

【解决方案3】：

查看 MediaElement.js 的 YouTube Playlist。它提供了 YouTube 视频的播放列表，但可以轻松更新以支持其他视频格式

【讨论】：