Question

我正在通过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一段时间了。我可以想到一些变通方法，比如为视频元素添加索引属性，但基本上我如何在“已结束”函数中获得正确的索引。

Answer 1

这里的问题是在循环中错误地使用了闭包变量。

在您的情况下，您可以使用$ .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));
    });

事件触发后获取jquery元素的索引

1 个答案: