[javascript] HTML 5 Video oder Audio-Playlist



Answers

Ich habe dafür eine JS-Geige erstellt:

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

Zunächst sieht Ihr HTML-Markup wie folgt 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 wird Ihr JavaScript-Code über die JQuery-Bibliothek wie folgt aussehen:

$(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, dein 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;
}​
Question

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

Mein Ziel ist es zu wissen, wann ein Video / Song fertig ist, um zu spielen und den nächsten zu nehmen und seine Lautstärke zu ändern.




Ja, Sie können Ihr src-Tag einfach auf eine .m3u-Playlist-Datei 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, dass Playlist-M3U-Dateien auf dem iPhone unterstützt werden, aber nicht auf viel mehr, einschließlich Safari 5, was irgendwie traurig ist. Ich bin mir nicht sicher über Android-Handys, aber ich bezweifle, dass sie es unterstützen, da Chrome nicht. Entschuldigung für die Fehlinformation.




jPlayer ist eine kostenlose und Open Source HTML5 Audio- und Videobibliothek, die Sie möglicherweise nützlich finden. Es hat Unterstützung für eingebaute Playlists: http://jplayer.org/







Links