mediaelement.js et playlist personnalisée

J'ai ce code (par exemple):

<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>

J'ai besoin de lire des fichiers audio à partir de la liste de file d'attente (l'un après l'autre).

Comment puis-je changer la source de l'audio pour le fichier suivant à partir de la liste après avoir terminé la lecture du fichier actuel et commencer à jouer le prochain?

Mise à jour: rubrique connexe à propos de mediaelement.js et la liste de lecture mais la réponse est sur l'utilisation de nombreux mediaelementplayer() des cas.

source d'informationauteur webvitaly

  1. 22

    Code pour faire de base de la liste de lecture pour 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  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. 8

    Maintenant il y a un plugin qui permet de résoudre cette tâche - https://github.com/duozersk/mep-feature-playlist