'Playing and looping multiple videos in a file (HTML)

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

javascripthtmlvideohtml5-video


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions