我正在通过 jquery 从指向 mp4 文件的 url 数组创建视频对象。 我想让第一个视频自动播放,然后一旦完成就选择“结束”功能并播放序列中的下一个视频。
$(document).ready(function () {
var urls = ["https://s3-us-west-1.amazonaws.com/linkto.mp4", "https://s3-us-west-1.amazonaws.com/linktoother.mp4"]
var videos = [];
for (var i = 0; i < urls.length; i++) {
var path = urls[i];
var video = $('<video></video>');
var source = $('<source></source>');
source.attr('src', path);
source.appendTo(video);
if (i === 0) {
video.attr('autoplay', 'true');
}
video.attr('id', 'video_' + i);
video.attr('preload', 'true');
video.attr('width', '100%');
videos.push(video);
video.on('ended', function () {
console.log('Video has ended!' + i);
// playNext(video);
});
$('#movie').append(video);
}
我可以看到生成的电影,并且第一部播放得很好。问题是当“结束”函数变量 i == 2 时,因为这就是数组中有多少个视频,并且 for 循环增加了 i。我已经离开 JavaScript 一段时间了。我可以想到解决方法,例如向视频元素添加索引属性或其他内容,但基本上如何在“结束”函数中获得正确的索引。
最佳答案
这里的问题是在循环中错误地使用了闭包变量。
在您的情况下,您可以通过使用 $.each() 迭代数组来创建本地闭包
$(document).ready(function () {
var urls = ["https://s3-us-west-1.amazonaws.com/linkto.mp4", "https://s3-us-west-1.amazonaws.com/linktoother.mp4"]
var videos = [];
$.each(urls, function (i, path) {
var video = $('<video></video>');
var source = $('<source></source>');
source.attr('src', path);
source.appendTo(video);
if (i === 0) {
video.attr('autoplay', 'true');
}
video.attr('id', 'video_' + i);
video.attr('preload', 'true');
video.attr('width', '100%');
videos.push(video);
video.on('ended', function () {
console.log(i)
});
$('#movie').append(video);
})
})
<小时/>
您确实不想拥有索引,因为所有视频元素都是同级元素,您只需找到当前结束的视频元素的下一个同级元素即可
video.on('ended', function () {
console.log('Video has ended!' + $(this).index());
var $current = $(this),
$next = $this.next();
console.log($next.find('source').attr('src'))
//playNext($(this));
});
关于javascript - 事件触发后获取 jquery 元素的索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27538749/