在Firefox中单击HTML5视频控件时如何防止事件冒泡 [英] How to prevent event bubbling when clicking on HTML5 video controls in Firefox

问题描述

在Firefox中，当一个视频标签被包裹在一个标签中时，使用标准的视频控件也会重新定向。我怎样才能使其行为像其他浏览器，例如点击暂停只暂停视频，并不重新指挥。这是我需要的。

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

 < a href =http：/ /www.google.comtarget =_ blank> 
< video controls =muted =preload =autoid =testidwidth =500> 
< source src =http://www.w3schools.com/html/mov_bbb.mp4type =video / mp4/> 
< source src =http://www.w3schools.com/html/mov_bbb.oggtype =video / ogg/> 
< source src =http://www.w3schools.com/html/mov_bbb.webmtype =video / webm/> 
< img src =http://dummyimage.com/1044x585/000/fff/> 
< / video> 
< / a> 
  

解决方案

HTML5规范明确指出， p>

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 =autoid =testidwidth = 500\" > 
 <！ -  stuff  - > 
< / video> 
   

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

  $（'。overlay'）。each（function（）{
 var vid = $（this）.prev （'video'）; 
 $（this）.css（{
 position：'fixed'，
 top：vid.offset（）。top +'px'，
左：vid.offset（）。left +'px'，
 width：vid.width（）+'px'，
 height：（vid.height（） -  30）+'px'， 
}）; 
}）; 
  

FIDDLE

In Firefox when a video tag is wrapped in an a tag, using the standard video controls also re-directs. How can I make it behave like the other browsers where for example clicking on pause only pauses the video and does NOT re-direct as well. This is what I need.

Here is a simple demo: 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>

解决方案

What you've got there is invalid markup, the HTML5 spec clearly states that

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

and the video navigation is in fact interactive content containing buttons.

For some reason clicking the controls in Chrome does not trigger the anchor, while in Firefox it does.
This is dependant on how the browser constructs the controls with the Shadow DOM, and as the markup is invalid and there is no real standard for this, it's anyone's guess.

What you should have done is to remove the anchor and use javascript to redirect when the video is clicked, something like this

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

That would have given you valid markup as you could just remove the wrapping anchor, but it doesn't solve the problem with not redirecting when clicking the controls either, it's exactly the same, as the controls are still inside the video and triggers the click handler in Firefox, but not in Chrome.

In webkit the controls could potentially have been targeted somehow with the -webkit-media-controls pseudo class, however Firefox doesn't seem to have any such pseudo class, so that won't work either.

What you're left with is relying on the fact that the controls seem to always be at the bottom, and they are around 30 pixels high, so you can just overlay the anchor on top of the video and leave out a little part of the bottom.
This will work in all browsers, and you'll have valid markup.

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

To make sure the anchor is placed correctly and has the correct size, a little javascript can be used

$('.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',
    });
});

FIDDLE

这篇关于在Firefox中单击HTML5视频控件时如何防止事件冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！