Question

我似乎无法让视频连续循环播放。到目前为止只播放一个视频。

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

我尝试使用for循环，但它不起作用。感谢

Answer 1

此代码将按顺序逐步显示所选导演的视频数组，当播放结束时，它将循环播放：

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

在文件中播放和循环多个视频（HTML）

1 个答案: