HTML 5 video or audio playlist

Question

Can I use a <video> or <audio> tag to play a playlist, and to control them?

My goal is to know when a video/song has finished to play and take the next and change its volume.

Answer 1

you could load next clip in the onend event like that

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

More information here

Answer 2

I created a JS fiddle for this here:

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

First, your HTML markup looks like this:

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

Second, your JavaScript code via JQuery library will look like this:

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

And last but not least, your 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; }​