0

i have this code for autoplay (playlist) movie

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Movie Playlist</title>
<script>
   var videoPlayer;
   var video_count = 1;
   window.onload = function (){ 
   videoPlayer = document.getElementById("homevideo");
   videoPlayer.addEventListener("ended", function (){
   video_count++;
   if (video_count == 6) video_count = 1;
   var nextVideo = video_count+".mp4";
   videoPlayer.src = nextVideo;
   }, false);
   }
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div style="width:100%;margin:0px auto;">
<video id="homevideo" width="100%" autoplay autobuffer src="1.mp4"></video>          
</div>

on the code above, i have 5 .mp4 movie, but if i have more than 5 .mp4 movie, the 6.mp4, 7.mp4 and other will not be played. so, how can i dynamically set the movie count pure using html5 or javascript?

Gumilar
  • 95
  • 2
  • 3
  • 12
  • from which dynamic ? The number of videos you've got stored on your server ? Ask your server. Randomness ? `Math.floor(Math.random * MAX_COUNT)`. – Kaiido Jan 31 '17 at 05:43
  • yes, dynamically count (.mp4) file stored on server. on the script above i manually set --> if (video_count == 6) video_count = 1; <-- because i have 5 .mp4 file – Gumilar Jan 31 '17 at 05:50
  • Then you'll have to make your server tell you how much video files are stored, no way to know it via js (well no clean way). And this all depends on your server architecture. – Kaiido Jan 31 '17 at 05:53
  • Possible duplicate of [Listing files of a directory in a webpage](http://stackoverflow.com/questions/27860507/listing-files-of-a-directory-in-a-webpage) – Kaiido Jan 31 '17 at 05:55

1 Answers1

1

You are better off having your server provide this information.

But for your existing approach, I'm assuming your video names are in sequential order ... so 1.mp4, 2.mp4, 3.mp4, etc ... so you could keep looping through the videos while increasing the count, and once a video fails to load at a given video_count, you can know that it is the limit and loop back to the start if you wanted.

function videoExists(videoUrl){
    var http = new XMLHttpRequest();

    http.open('HEAD', videoUrl, false);
    http.send();

    return http.status != 404;
}

So, for example ...

var videoPlayer;
var video_count = 1;
var video_max = 0;

window.onload = function (){ 
    videoPlayer = document.getElementById("homevideo");
    videoPlayer.addEventListener("ended", function (){
        var nextVideo = (video_count+1)+".mp4";

        if(video_count <= video_max || videoExists(nextVideo)){
            videoPlayer.src = nextVideo;
            video_count++;
        }else{
            video_max = video_count;

            //reset back to original video
            video_count = 1;
            videoPlayer.src = video_count+".mp4";
        }
    }, false);
}

I didn't test the code, but you should get the idea. Please let me know if you have any questions about this approach.

X33
  • 1,310
  • 16
  • 37
  • @Kaiido Yes, I would normally agree. But I don't think it matters in this case? Please correct me if I'm wrong, thanks. – X33 Jan 31 '17 at 06:26
  • Well... you are only requesting the header, so it should be fine in most cases, but if the server for X reason takes 10 seconds to answer, then your UI will be blocked for 10 seconds. – Kaiido Jan 31 '17 at 06:28