英文:
Video source queuing function skips array element unintentionally
问题
I am trying to make a simple queue system that plays videos turn by turn. The video source is stored inside an array. The below code has a function that gets the first index element from the array, plays that video, then removes that item from the array. It repeats the same method again and again until no elements are found inside the array.
它试图创建一个简单的视频队列系统,依次播放视频。视频来源存储在一个数组中。下面的代码包含一个函数,该函数从数组中获取第一个索引元素,播放该视频,然后从数组中删除该项。它会一遍又一遍地重复相同的方法,直到数组中不再有元素。
It plays the first video as intended, but then skips the second video (array element) and plays the third. Where did I go wrong and how can I fix it?
它按预期播放第一个视频,但然后跳过了第二个视频(数组元素)并播放了第三个。我做错了什么,如何修复它?
英文:
I am trying to make a simple queue system that plays videos turn by turn. The video source is stored inside an array. The below code has a function that gets the first index element from the array plays that video, then removes that item from the array. It repeats the same method again and again until no elements are found inside the array.
It plays the first video as intended, but then skips the second video (array element) and plays the third. Where did I go wrong and how can I fix it?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
myArr = ["http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"]
function test() {
$('#player').attr('src', myArr[0])
$("#player").on("loadedmetadata", function() {
myArr = myArr.slice(1)
var onEnd = setInterval(() => {
$("#player").on("timeupdate", function() {
var cTime = this.currentTime;
var dur = this.duration;
//console.log(cTime, dur)
//check if video finished playing
if (cTime == dur) {
console.log('video Ended')
if (myArr.length != 0) {
clearInterval(onEnd)
test()
} else {
clearInterval(onEnd)
console.log('all videos played')
}
}
});
}, 500)
})
}
test()
<!-- language: lang-css -->
video {
width: 100%;
height: 60vh;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="player" muted autoplay></video>
<!-- end snippet -->
答案1
得分: 1
在尚未播放所有视频的情况下,您再次调用test
函数。但是,此函数为loadedmetadata
设置了一个事件监听器,该监听器会将数组推进一位。多次调用test
会为loadedmetadata
事件设置多个事件监听器,每个监听器都会触发并推进数组。您需要重新构建您的代码,以确保只附加一次监听器。
英文:
In the case that not all videos were played yet, you call the test
function again. But this function sets an event listener for loadedmetadata
, and that listener advances the array by one. By calling test
multiple times, you are setting multiple event listeners for the loadedmetadata
event, each of which will fire and advance the array. You need to restructure your code such that the listener is only attached once.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论