如何在Firefox中单击HTML5视频控件时防止事件冒泡

Question

在Firefox中,当视频标记包含在标记中时,使用标准视频控件也会重定向.如何让它像其他浏览器一样,例如点击暂停只会暂停视频,也不会重定向.这就是我需要的.

这是一个简单的演示:http://jsfiddle.net/me2loveit2/cSTGM/

<a href="http://www.google.com" target="_blank">
    <video controls="" muted="" preload="auto" id="testid" width="500">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
        <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
        <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm"/>
        <img src="http://dummyimage.com/1044x585/000/fff"/>
    </video>
</a>

Answer 1

你得到的是无效的标记，HTML5 规范明确指出

a 元素可以环绕整个段落、列表、表格等，甚至整个部分，只要其中没有交互内容（例如按钮或其他链接）。

视频导航实际上是包含按钮的交互式内容。

出于某种原因，在 Chrome 中单击控件不会触发锚点，而在 Firefox 中则是。
这取决于浏览器如何使用 Shadow DOM 构建控件，并且由于标记无效并且没有真正的标准，这是任何人的猜测。

您应该做的是删除锚点并在单击视频时使用 javascript 进行重定向，如下所示

$('#testid').on('click', function() {
    var win = window.open('http://www.google.com', '_blank');
    win.focus();
});

这会给你有效的标记，因为你可以删除包装锚点，但它也不能解决点击控件时不重定向的问题，它完全相同，因为控件仍在视频中并触发点击Firefox 中的处理程序，但 Chrome 中没有。

在 webkit 中，控件可能以某种方式被-webkit-media-controls伪类作为目标，但是 Firefox 似乎没有任何这样的伪类，所以这也不起作用。

你剩下的就是依赖这样一个事实，即控件似乎总是在底部，它们大约有 30 像素高，所以你可以只将锚点覆盖在视频的顶部，而省略一小部分底部。
这将适用于所有浏览器，并且您将拥有有效的标记。

<video controls="" muted="" autoplay preload="auto" id="testid" width="500">
    <!-- stuff -->
</video>
<a href="http://www.google.com" class="overlay" target="_blank"></a>

为了确保锚点放置正确并具有正确的大小，可以使用一些 javascript

$('.overlay').each(function() {
    var vid = $(this).prev('video');
    $(this).css({
        position : 'fixed',
        top      : vid.offset().top + 'px',
        left     : vid.offset().left + 'px',
        width    : vid.width() + 'px',
        height   : (vid.height() - 30) + 'px',
    });
});

小提琴