HTML 5 video or audio playlist

Stworzyłem do tego skrzypka JS:

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

Po pierwsze, twój znacznik HTML wygląda tak:

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

Po drugie, twój kod JavaScript przez Bibliotekę JQuery będzie wyglądał tak:

$(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")
    })
})​

I ostatni, ale nie mniej ważny, Twój 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;
}​

Powinieneś rzucić okiem na Popcorn.js-a javascript framework do interakcji z Html5: http://popcornjs.org/documentation

JPlayer jest darmową i otwartoźródłową biblioteką Audio i wideo HTML5, która może okazać się przydatna. Posiada wsparcie dla playlist wbudowanych: http://jplayer.org/

Zoptymalizowałem trochę kod javascript z cameronjonesweb. Teraz możesz po prostu dodać klipy do tablicy. Wszystko inne odbywa się automatycznie.

var nextVideo = ["http://www.w3schools.com/html/movie.mp4","http://www.w3schools.com/html/mov_bbb.mp4","http://www.w3schools.com/html/movie.mp4"];
var curVideo = 0;
var videoPlayer = document.getElementById('videoPlayer');
videoPlayer.onended = function(){
		++curVideo;
    if(curVideo < nextVideo.length){    		
        videoPlayer.src = nextVideo[curVideo];        
    } 
}

<video width="320" height="240" autoplay controls id="videoPlayer">
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Nie ma możliwości zdefiniowania listy odtwarzania za pomocą znacznika <video> lub <audio>, ale istnieją sposoby ich kontrolowania, dzięki czemu można symulować listę odtwarzania za pomocą JavaScript. Sprawdź sekcje 4.8.7, 4.8.9 (zwłaszcza 4.8.9.12) specyfikacji HTML5 . Mam nadzieję, że większość metod i zdarzeń jest zaimplementowana w nowoczesnych przeglądarkach, takich jak Chrome i Firefox (oczywiście najnowsze wersje).

Tak, możesz po prostu skierować swój znacznik src na a .plik listy odtwarzania m3u. A .plik m3u jest łatwy do zbudowania -

#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

-----aktualizacja-----

Okazuje się, że pliki m3u listy odtwarzania są obsługiwane na iPhone, ale nie na wiele innych, w tym Safari 5, który jest trochę smutny. Nie jestem pewien, co do telefonów z Androidem, ale wątpię, żeby też go wspierały, bo Chrome nie. przepraszam za dezinformację.

To było zrobione tam: http://www.jezra.net/projects/pageplayer

Nie byłem zadowolony z tego, co zostało zaoferowane, więc oto moja propozycja, używając 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>