HTML 5 Liste de lecture vidéo ou audio

J'ai créé un violon JS pour cela ici:

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

Tout d'abord, votre balisage HTML ressemble à ceci:

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

Deuxièmement, votre code JavaScript via la bibliothèque JQuery ressemblera à ceci:

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

Et le dernier mais non le moindre, votre 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;
}​

Vous devriez jeter un oeil à Popcorn.js - un framework javascript pour interagir avec Html5 : http://popcornjs.org/documentation

JPlayer est une bibliothèque audio et vidéo HTML5 libre et open source que vous pouvez trouver utile. Il a un support pour les listes de lecture intégrées: http://jplayer.org/

J'ai optimisé un peu le code javascript de cameronjonesweb. Maintenant, vous pouvez simplement ajouter les éléments dans le tableau. Tout le reste est fait automatiquement.

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>

Il n'y a aucun moyen de définir une playlist en utilisant simplement une balise <video> ou <audio>, mais il existe des moyens de les contrôler, de sorte que vous pouvez simuler une playlist en utilisant JavaScript. Consultez les sections 4.8.7, 4.8.9 (en particulier 4.8.9.12) de la spécification HTML5 . Espérons que la majorité des méthodes et des événements sont implémentés sur les navigateurs modernes tels que Chrome et Firefox (dernières versions, bien sûr).

Oui, vous pouvez simplement pointer votre balise src vers a .fichier de playlist m3u. Un .le fichier m3u est facile à construire -

#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

-----mise à JOUR-----

Eh bien, il se trouve des fichiers playlist m3u sont pris en charge sur l'iPhone, mais pas sur beaucoup d'autres, y compris Safari 5 qui est un peu triste. Je ne suis pas sûr des téléphones Android mais je doute qu'ils le supportent non plus puisque Chrome ne le fait pas. désolé pour la désinformation.

Cela a été fait là : http://www.jezra.net/projects/pageplayer

Je n'étais pas satisfait de ce qui était offert, alors voici ma proposition, en utilisant 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>

Vous n'avez qu'à éditer le playlist tableau, et vous avez terminé