mediaelement.js und custom playlist

Habe ich diesen code (zum Beispiel):

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

Brauche ich für das Abspielen von audio-Dateien aus der Liste queue (einer nach dem anderen).

Wie kann ich ändern Sie die Quelle der audio für der nächsten Datei aus der Liste nach Beendigung der Wiedergabe der aktuellen Datei und starten Sie die Wiedergabe das nächste?

Update: Verwandtes Thema über mediaelement.js und playlist aber die Antwort ist über die Verwendung von vielen mediaelementplayer() Instanzen.

InformationsquelleAutor webvitaly | 2012-08-08

  1. 22

    Code für basic-playlist für 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>

    InformationsquelleAutor webvitaly

  2. 8

    Gibt es jetzt ein plugin, das diese Aufgabe löst - https://github.com/duozersk/mep-feature-playlist

    interessant. Gesucht wird für diese eine lange Zeit vor. Vielen Dank für das teilen 🙂
    Funktioniert wie ein Charme.

    InformationsquelleAutor Andrew Berezovsky

Schreibe einen Kommentar