HTML 5 video or audio playlist


Use HTML with JavaScript to add playlist. The onended event fires when the audio/video has reached the end. You can add messages like “Thank you for watching”, “Stay tuned!”, etc

Example

You can try to run the following code to implement the onended attribute −

<!DOCTYPE HTML>
<html>
   <body>
      <video width = "300" height = "200" controls onended = "display()">
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         Your browser does not support the video element.
      </video>
      <script>
         function display() {
            alert ("Thank you for watching! Stay tuned!");
         }
      </script>
   </body>
</html>

You could load the next clip in the onended event like in the below-given code

<script >
   var next = "path/of/next/video.mp4";
   var video = document.getElementById('video');
   video.onended = function(){
   video.src = next;
}
</script>
<video id = "video" src = "path/of/current/video.mp4" autoplayautobuffer controls />

Updated on: 24-Jun-2020

430 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements