Playing and looping multiple videos in a file (HTML)

Question

I cant seem to get the videos to loop continuously. It is only playing one video so far.

<body onload="onload();">
<h1>Video Autoplay</h1>
<div id="message"></div>
<input type="file" id="ctrl" webkitdirectory directory multiple/>
<video id="ctrl" onended="onVideoEnded();" autoplay loop></video>
<script>

    var playSelectedFile = function (event) {
        var file = this.files[0]
        var type = file.type
        var videoNode = document.querySelector('video')
        var fileURL = URL.createObjectURL(file)
        videoNode.src = fileURL
        videoNode.play();       
    }

        var inputNode = document.querySelector('input')
        inputNode.addEventListener('change', playSelectedFile)

</script>

I tried using a for loop, and it doesn't work. Thanks

right idea.. you need code in a listener for the onEnded event that will load the next video source — Offbeatmammal, Nov 17 '16 at 21:08
What code will that be? do i need to have a second listener? @Offbeatmammal — Chloven Tan, Nov 18 '16 at 09:17
see http://stackoverflow.com/questions/2551859/html-5-video-or-audio-playlist — Offbeatmammal, Nov 18 '16 at 14:46

Offbeatmammal · Accepted Answer · 2016-11-22T23:41:19.787

2

this code will step through the in an array of videos from the selected director in order, when the playback gets gets to the end it will loop round:

<html>
<head>

<script>
var videos = new Array(); //("BigBuck.m4v","Video.mp4","BigBuck.m4v","Video2.mp4");
var currentVideo = 0;

function nextVideo() {
    // get the element
    videoPlayer = document.getElementById("play-video")
    // remove the event listener, if there is one
    videoPlayer.removeEventListener('ended',nextVideo,false);

    // update the source with the currentVideo from the videos array
    videoPlayer.src = videos[currentVideo];
    // play the video
    videoPlayer.play()

    // increment the currentVideo, looping at the end of the array
    currentVideo = (currentVideo + 1) % videos.length

    // add an event listener so when the video ends it will call the nextVideo function again
    videoPlayer.addEventListener('ended', nextVideo,false);
}

function ooops() {
    console.log("Error: " + document.getElementById("play-video").error.code)
}
</script>
</head>
<body> 

<input type="file" id="filepicker" name="fileList" webkitdirectory directory multiple />

<div class="video-player">
    <video  id="play-video" width="588" height="318" controls autobuffer muted>
    Your browser does not support the video tag.
    </video>    <!--end video container -->
</div>  

<script>
// add error handler for the video element
document.getElementById("play-video").addEventListener('error', ooops,false);

// add change event to pick up selected files
document.getElementById("filepicker").addEventListener("change", function(event) {

  var files = event.target.files;
  // loop through files
  for (i=0; i<files.length; i++) {
    // select the filename for any videos
    if (files[i].type == "video/mp4") {
      // add the filename to the array of videos
      videos.push(files[i].name); // note: if you need the path, work from webkitRelativePath;
    }
  };
  // once videos are loaded initialize and play the first one
  nextVideo();
  }, false);

</script>

</body>
</html>

edited Nov 22 '16 at 23:41

answered Nov 19 '16 at 00:25

Offbeatmammal

7,970
2
33
52

Thanks alot for the answer. is there anyway i can use webkitdirectory as an array in the code? @offbeatmammal – Chloven Tan Nov 22 '16 at 06:32
yes, `webkitdirectory` will give you an array of files (see this example https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory ), thought you may need to manipulate the path to get to the files to play back (similar to your original) – Offbeatmammal Nov 22 '16 at 07:08
How do i fit it in the code above? I tried using target.files and it didn't work. @Offbeatmammal – Chloven Tan Nov 22 '16 at 07:32
modified answer to include the `webkitdirectory` array – Offbeatmammal Nov 22 '16 at 23:41
Can you tell me how? I'm not so sure about 'webkitdirectory' @Offbeatmammal – Chloven Tan Nov 23 '16 at 03:38
have you tried the updated code in the sample? it now takes the files from the directory selected (assuming it's the same directory the webpage is hosted in) and plays them – Offbeatmammal Nov 23 '16 at 05:04
Yes i am trying with the sample code. I don't really know how to get the files from the `webkitdirectory` and plays them. i tried alot of ways but somehow the video player can't play them. Thanks for your time btw! @Offbeatmammal – Chloven Tan Nov 23 '16 at 06:25
Oh wait nervermind it works already. Thanks alot bro! @Offbeatmammal – Chloven Tan Nov 23 '16 at 07:27
Hi. Do you have any idea if i were to change to images instead of videos, will the code change? @Offbeatmammal – Chloven Tan Dec 07 '16 at 03:50
images don't have an "onended" event, you'd need to (for instance) put the change onto a timer – Offbeatmammal Dec 07 '16 at 04:28
Alright thanks. BTW the code above does not work anymore when i create a new project with the same exact code. Do you know why? @Offbeatmammal – Chloven Tan Dec 07 '16 at 07:30
if the code hasn't changed then something else has. try eliminating the differences... – Offbeatmammal Dec 07 '16 at 23:43
The previous code on the project only accepted the current video files. Whenever i add a new video it only plays the previous videos one time then it stopped. @Offbeatmammal – Chloven Tan Dec 13 '16 at 01:57

Playing and looping multiple videos in a file (HTML)

1 Answers1