HTML 5 Video- oder Audio-Wiedergabeliste

Kann ich ein <video>oder <audio>-Tag verwenden, um eine Wiedergabeliste abzuspielen und zu steuern?

Mein Ziel ist es zu wissen, wann ein Video / Song fertig ist, das nächste aufzunehmen und seine Lautstärke zu ändern.

Sie können den nächsten Clip so in das onend-Ereignis laden

<script type="text/javascript">
var nextVideo = "path/of/next/video.mp4";
var videoPlayer = document.getElementById('videoPlayer');
videoPlayer.onended = function(){
    videoPlayer.src = nextVideo;
}
</script>
<video id="videoPlayer" src="path/of/current/video.mp4" autoplay autobuffer controls />

Weitere Informationen hier

Ich habe hier eine JS-Geige dafür erstellt:

http://jsfiddle.net/Barzi/Jzs6B/9/

Zunächst sieht Ihr HTML-Markup folgendermaßen aus:

<video id="videoarea" controls="controls" poster="" src=""></video>

<ul id="playlist">
    <li movieurl="VideoURL1.webm" moviesposter="VideoPoster1.jpg">First video</li>
    <li movieurl="VideoURL2.webm">Second video</li>
    ...
    ...
</ul>

Zweitens sieht Ihr JavaScript-Code über die JQuery-Bibliothek folgendermaßen aus:

$(function() {
    $("#playlist li").on("click", function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "",
            "autoplay": "autoplay"
        })
    })
    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    })
})​

Und zu guter Letzt Ihr CSS:

#playlist {
    display:table;
}
#playlist li{
    cursor:pointer;
    padding:8px;
}
#playlist li:hover{
    color:blue;                        
}
#videoarea {
    float:left;
    width:640px;
    height:480px;
    margin:10px;    
    border:1px solid silver;
}​

Ich habe den Javascript-Code von cameronjonesweb ein wenig optimiert. Jetzt können Sie einfach die Clips zum Array hinzufügen. Alles andere wird automatisch erledigt.

<video autoplay controls id="Player" src="http://www.w3schools.com/html/movie.mp4" onclick="this.paused ? this.play() : this.pause();">Your browser does not support the video tag.</video>

<script>
var nextsrc = ["http://www.w3schools.com/html/movie.mp4","http://www.w3schools.com/html/mov_bbb.mp4"];
var elm = 0; var Player = document.getElementById('Player');
Player.onended = function(){
    if(++elm < nextsrc.length){         
         Player.src = nextsrc[elm]; Player.play();
    } 
}
</script>

Sie sollten sich Popcorn.js ansehen - ein Javascript-Framework für die Interaktion mit Html5: http://popcornjs.org/documentation

jPlayer ist eine kostenlose und Open-Source-HTML5-Audio- und -Videobibliothek, die Sie möglicherweise nützlich finden. Es unterstützt integrierte Wiedergabelisten: http://jplayer.org/

Probieren Sie diese Lösung aus, sie benötigt eine Reihe von Soundtracks und spielt alle im Playlist-Stil ab und wiederholt sogar die Playlist . Im Folgenden wird ein wenig Jquery verwendet, um das Abrufen des Audioelements zu verkürzen. Wenn Sie Jquery nicht verwenden möchten, ersetzen Sie die erste Zeile des Javascript durch var audio = document.getElementById("audio");und es funktioniert genauso.

Javascript:

var audio = $("#audio")[0];
var tracks = {
    list: ["track_01.mp3", "track_02.mp3", "track_03.mp3"], //Put any tracks you want in this array
    index: 0,
    next: function() {
        if (this.index == this.list.length - 1) this.index = 0;
        else {
            this.index += 1;
        }
    },
    play: function() {
        return this.list[this.index];
    }
}

audio.onended = function() {
    tracks.next();
    audio.src = tracks.play();
    audio.load();
    audio.play();
}

audio.src = tracks.play();

HTML:

<audio id="audio" controls>
    <source src="" />
</audio>

Auf diese Weise können Sie beliebig viele Songs im Wiedergabelistenstil abspielen. Jedes Lied beginnt, sobald das vorherige beendet ist. Ich glaube nicht, dass dies in Internet Explorer funktionieren wird, aber es ist trotzdem Zeit, von dieser alten Sache fortzufahren!

Fügen Sie einfach tracks.listalle gewünschten Songs in das Array ein und alle werden nacheinander abgespielt. Es kehrt auch zum ersten Song zurück, sobald der letzte fertig ist.

Es ist kürzer als viele der Antworten, es enthält so viele Titel, wie Sie möchten, es ist leicht verständlich und es lädt das Audio tatsächlich vor der Wiedergabe (damit es tatsächlich funktioniert), also dachte ich, ich würde es hier aufnehmen. Ich konnte keine Sounddateien finden, die in einem laufenden Snippet verwendet werden könnten, aber ich habe es mit 3 meiner eigenen Soundtracks auf Chrome getestet und es funktioniert. Die onendedMethode, die das endedEreignis erkennt , funktioniert auch in allen Browsern außer Internet Explorer gemäß caniuse.

HINWEIS: Nur um klar zu sein, funktioniert dies sowohl mit Audio als auch mit Video .

Es gibt keine Möglichkeit, eine Wiedergabeliste nur mit einem <video>oder einem <audio>Tag zu definieren , aber es gibt Möglichkeiten, sie zu steuern, sodass Sie eine Wiedergabeliste mit JavaScript simulieren können. Lesen Sie die Abschnitte 4.8.7, 4.8.9 (insbesondere 4.8.9.12) der HTML5-Spezifikation . Hoffentlich werden die meisten Methoden und Ereignisse in modernen Browsern wie Chrome und Firefox implementiert (natürlich die neuesten Versionen).

Ja, Sie können Ihr src-Tag einfach auf eine .m3u-Wiedergabelistendatei verweisen. Eine .m3u-Datei ist einfach zu erstellen -

#hosted mp3's need absolute paths but file system links can use relative paths
http://servername.com/path/to/mp3.mp3
http://servername.com/path/to/anothermp3.mp3
/path/to/local-mp3.mp3

-----AKTUALISIEREN-----

Nun, es stellt sich heraus , Playlist M3U - Dateien werden auf dem iPhone unterstützt, aber nicht auf viel mehr einschließlich Safari 5 , die irgendwie traurig ist. Ich bin mir bei Android-Handys nicht sicher, aber ich bezweifle, dass sie es auch unterstützen, da Chrome dies nicht tut. Entschuldigung für die Fehlinformationen.

Ich war mit dem Angebot nicht zufrieden. Hier ist mein Vorschlag mit jQuery:

            <div id="playlist">
                <audio id="player" controls preload="metadata" volume="1">
                  <source src="" type="audio/mpeg">
                  Sorry, this browser doesn't support HTML 5.0
                </audio>
                <ul></ul>
            </div>

            <script>
                var folder = "audio";
                var playlist = [
                    "example1.mp3",
                    "example2.mp3"
                ];
                for (var i in playlist) {
                    jQuery('#playlist ul').append('<li>'+playlist[i]+'</li>');
                }

                var player = document.getElementById('player');
                var playing = playlist[0];
                player.src = folder + '/' + playing;

                function display(id) {
                    var list = jQuery('#playlist ul').children();
                    list.removeClass('playing');
                    jQuery(list[id]).addClass('playing');
                }

                display(0);

                player.onended = function(){
                    var ind_next = playlist.indexOf(playing) + 1;

                    if (ind_next !== 0) {
                        player.src = folder + '/' + playlist[ind_next];
                        playing = player.src;
                        display(ind_next)
                        player.play();
                    }
                }
            </script>

Sie müssen nur das playlistArray bearbeiten und sind fertig

Um die aktuellen Antworten zu ergänzen, finden Sie hier eine Wiedergabeliste mit Videos, die mit separaten Untertiteldateien arbeiten. Am Ende der Wiedergabeliste wird endPage aufgerufen

<video id="video" controls autoplay preload="metadata">
   <source src="vid1.mp4" type="mp4">
   <track id="subs" label="English" kind="subtitles" srclang="en" src="sub1.vtt" default>
</video>

<script type="text/javascript">
var endPage = "duckduckgo.com";
var playlist = [
    { 
        'file': 'vid2.mp4',
        'subtitle': 'sub2.vtt'
    },{
        'file': 'vid3.mp4',
        'subtitle': 'sub3.vtt'
    }
]
var i = 0;
var videoPlayer = document.getElementById('video');
var subtitles = document.getElementById('subs');
videoPlayer.onended = function(){
    if(i < playlist.length){
        videoPlayer.src = playlist[i].file;
        subtitles.src = playlist[i].subtitle;
        i++;
    } else {
        console.log("We are leaving")
        document.location.href = endPage;
    }
}
</script>

Sie können einen Ereignis-Listener mit 'beendet' als erstem Parameter hinzufügen

So was :

https://stackoverflow.com/a/2880950/6839331

Es wurde dort gemacht: http://www.jezra.net/projects/pageplayer