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 spec明确指出

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">  </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', }); });

FIDDLE

Answer 2

除了使用自定义控件之外，我不确定是否可以以真正优雅的方式绕过控件行为，因为视频事件（play，pause等）会触发点击事件后。这是一个硬编码默认控件的近似高度的解决方案。我不喜欢硬编码，但在其他方面我觉得没关系。它适用于所有a和video元素，并且不会对元素进行过多的迭代。 setTimeout位是event.preventDefault()解决链接行为和播放/暂停行为的解决方法。

$(document).on('click', 'a', function(event) {
    var video = $('video:hover').first();
    if (video.length && video.offset().top + video.height() - event.pageY < 35) {
        var anchor = $(this);
        var href = anchor.attr('href');
        var target = anchor.attr('target');
        anchor.attr('href', 'javascript:;');
        anchor.attr('target', null);
        setTimeout(function() {
            anchor.attr('href', href);
            anchor.attr('target', target);
        }, 1);
    }
});

Answer 3

您可以通过为视频创建自定义控件来实现此目的，并仅使用video标记而不是控件包裹a标记。这使您可以选择在浏览器中为视频提供一致的外观控件，但您必须对CSS有一个很好的理解，以使其在各种浏览器中看起来很好且一致。我已经包含了一个你想要的CodePen项目，以及一些自定义控件。不同浏览器的控件看起来不太好，但我认为你可以理解。

http://codepen.io/anon/pen/dtHsb

Answer 4

非常难看，但通常的解决方案不起作用，因为event.stropPropagation（）仅适用于事件处理程序，而event.preventDefault（）会破坏控件。

http://jsfiddle.net/cSTGM/28/

$('#testid').click(function() {
    link = $(this).parent();
    originalHref = link.attr('href');
    originalTarget = link.attr('target');
    link.attr('href', 'javascript:void(0)');
    link.attr('target', '_self');
    setTimeout(function() {
        link.attr('href', originalHref);
        link.attr('target', originalTarget);        
    }, 0);
});

Answer 5

如果它是VIDEO标签，我们只需要阻止重定向

$('#testid').click(function() {
    if (event.target.tagName !=== 'VIDEO') {
        //redirect
    }
});

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

5 个答案: