在 Firefox 中單擊 HTML5 視頻控件時如何防止事件冒泡

Question

在 Firefox 中，當視頻標簽包含在 a 標簽中時，使用標准視頻控件也會重定向。 我怎樣才能讓它表現得像其他瀏覽器一樣，例如點擊暫停只會暫停視頻並且不會重定向。 這就是我需要的。

這是一個簡單的演示： 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',
    });
});

小提琴

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

您可以通過為您的視頻創建自定義控件並僅用a標簽包裝video標簽而不是控件來實現此目的。 這使您可以選擇跨瀏覽器為您的視頻提供一致的外觀控件，但您必須對 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
    }
});