-1

为什么我的简单 JQuery 代码中没有绑定事件？- http://pastebin.com/24J6q5G0

相关部分：

<div class="videoWrapper">
    <video controls preload autoplay>
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
    </video>
</div>

<div class="videoWrapper">
    <video controls preload="none">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
    </video>
</div>

和javascript：

$(document).ready(function() {
    var vid0 = $(document.getElementsByClassName('videoWrapper')[0]);
    var vid1 = $(document.getElementsByClassName('videoWrapper')[1]);
    vid1.hide();
    vid0.bind('ended', function() {
        vid1.show();
    })
})

（当 HTML5 视频结束时，我一直在关注Detect）

4

4 回答 4

2

结束的事件没有传播（冒泡），所以试试

$(document).ready(function() {
    var wrappers = $('.videoWrapper');
    wrappers.eq(1).hide()
    wrappers.eq(0).find('video').bind('ended', function() {
        wrappers.eq(1).show();
    })
})

在您的情况下，您将事件绑定到包装div元素，但ended事件不会冒泡到父元素，这意味着您的处理程序将永远不会被执行。

于 2013-09-30T10:08:18.513 回答
0

首先，HTML5 视频的事件在video元素上触发，因此您附加到了错误的元素。此外，您创建 jQuery 选择器的方法有点奇怪。尝试这个：

var $vid0 = $('.videoWrapper video').eq(0);
var $vid1 = $('.videoWrapper video').eq(1);
$vid1.parent().hide();
$vid0.bind('ended', function() {
    $vid1.parent().show();
})

示例小提琴

于 2013-09-30T10:09:21.263 回答
-1

我使用的解决方案（认为当时只有一个 [错误] 答案）是：

$(document).ready(function() {
    var vid0 = $(document.getElementsByClassName('videoWrapper')[0]);
    var vid1 = $(document.getElementsByClassName('videoWrapper')[1]);
    vid1.hide();
    vid0.children().bind('ended', function() {    // Note this line
        vid1.show();
    })
})
于 2013-10-02T12:55:02.277 回答
-1

它不起作用的原因是因为您的 vid0 是包装器 div 并且ended事件需要video标签。

这是一个有效的演示修复：http: //jsfiddle.net/

我添加了和#video0标签。#video1video

于 2013-09-30T10:16:58.070 回答