Liste de lecture vidéo ou audio HTML 5

Question

Puis-je utiliser une balise <video> ou <audio> pour lire une liste de lecture et 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.

Answer 1

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

Answer 2

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;
}​
 

Answer 3

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

Answer 4

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/

Answer 5

Il est impossible de définir une liste de lecture en utilisant uniquement les balises <video> ou <audio> , mais il existe des moyens de les contrôler pour vous permettre de simuler une liste de lecture à l'aide de 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 (les dernières versions, bien sûr).