[Javascript] HTML 5 Video- oder Audio-Wiedergabeliste


Answers

Ich habe hier eine JS-Geige kreiert:

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

Zunächst sieht Ihr HTML-Markup so 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 so 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 nicht zuletzt: 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;
}​
Question

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

Mein Ziel ist es zu wissen, wann ein Video / Lied fertig ist, um zu spielen und das nächste zu nehmen und seine Lautstärke zu ändern.




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

#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, Wiedergabeliste m3u-Dateien werden auf dem iPhone unterstützt, aber nicht auf viel mehr einschließlich Safari 5, die irgendwie traurig ist. Ich bin mir über Android-Handys nicht sicher, aber ich bezweifle, dass sie es unterstützen, da Chrome dies nicht tut. Entschuldigung für die Fehlinformation.







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