web-dev-qa-db-fra.com

Liste de lecture vidéo ou audio HTML 5

Puis-je utiliser un <video> ou <audio> balise pour lire une liste de lecture et pour la contrôler?

Mon but est de savoir quand une vidéo/chanson a fini de jouer et de prendre la suivante et de changer son volume.

javascripthtmlhtml5audiovideo
64
xdevel2000

vous pouvez charger le clip suivant dans l'événement onend comme ça

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

Plus d'informations ici

64
markcial

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

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

Tout d'abord, votre balise 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;
}​
11
Maziar Barzi

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

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

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

3
brendan

jPlayer est une bibliothèque gratuite et open source HTML5 Audio et Vidéo qui peut vous être utile. Il prend en charge les listes de lecture intégrées dans: http://jplayer.org/

3
yagoogaly

Il n'y a aucun moyen de définir une liste de lecture en utilisant simplement un <video> ou <audio> _, mais il existe des moyens de les contrôler, vous pouvez donc simuler une liste de lecture en utilisant JavaScript. Consultez les sections 4.8.7, 4.8.9 (en particulier 4.8.9.12) de spécifications 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 (les dernières versions, bien sûr)).

1
Felix

Oui, vous pouvez simplement pointer votre tag src sur un fichier de playlist .m3u. Un 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

----- UPDATE -----

Eh bien, il s'avère que les fichiers m3u de la liste de lecture sont pris en charge sur l'iPhone, mais pas sur beaucoup d'autres, y compris Safari 5, qui est gentil de triste. Je ne suis pas sûr des téléphones Android mais je doute qu'ils le prennent en charge non plus depuis Chrome ne le fait pas. Désolé pour la désinformation.

1
Marcus Pope

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

Il vous suffit de modifier le tableau playlist et vous avez terminé

0
MrVaykadji

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

0
Laurent Debricon