gpt4 book ai didi

javascript - 播放和循环播放文件中的多个视频 (HTML)

转载 作者:行者123 更新时间:2023-11-28 01:04:10 26 4
gpt4 key购买 nike

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

<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 循环,但它不起作用。谢谢

最佳答案

此代码将按顺序遍历所选导演的一系列视频,当播放结束时它将循环:

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

关于javascript - 播放和循环播放文件中的多个视频 (HTML),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40649624/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com