javascript - 上的点击处理程序与 Firefox 的 native 行为冲突

Question

我已经使用默认的 HTML5 视频播放器向我的网站添加了一个视频。代码是这样的:

<video width="100%" height="100%" controls>
  <source src="http://media.sublimevideo.net/v/midnight-sun-short-edit-360p.mp4" type="video/mp4">
</video>

我想做的是点击视频停止或启动视频。所以我添加了这个:

onclick="this.paused?this.play():this.pause();"

一切都很好。直到 Firefox 35 为播放器添加了这个功能。所以现在您只能通过右键单击并选择播放来播放视频 - 普通点击将首先通过 native 行为播放视频，然后立即通过我的点击处理程序暂停它。糟糕的。所以我想到了一个像这样的 JavaScript 函数:

function startstop() {
  if ( FirefoxVersionNumber > 34 ) {
    // do nothing
  } else {
    // start or stop video
  }
}

我遇到的问题是如何检查浏览器版本？我试过的所有版本都返回 Firefox 版本号是 5...我认为它来自 Netscape 部分。

Answer 1

您需要阻止点击事件的默认行为，这与您使用 JavaScript 自行处理表单提交时阻止表单提交的默认行为的方式大致相同。

Event.preventDefault是完成工作的工具。

就这样

video.addEventListener('click', function (event) {
    event.preventDefault(); // Prevent the default behaviour in Firefox

    // Then toggle the video ourselves
    if (this.paused) {
        this.play();
    }
    else {
        this.pause();
    }
});

这是一个在 Chrome(没有内置的视频点击切换行为)和 Firefox(至少在最近的版本中有)中都可以使用的 Fiddle:http://jsfiddle.net/LjLgkk71/

顺便说一句，作为一般规则，你应该忘记浏览器嗅探，直到你真正彻底地用尽所有其他途径(除了使用它来解决旧浏览器中特定已知的怪癖和错误，与行为有关已经固定或标准化)。您在问题中表达的只是不在某些浏览器版本上应用点击处理程序的想法被误导了；您无法知道(我也不知道)其他浏览器共享或有朝一日将共享 Firefox 的行为。如果您采用了自己的方法，那么当主要浏览器之一效仿 Firefox 的示例时，或者当您的用户之一试图在 Nintendo DS 或其他设备上使用您的网站时，它几乎不可避免地会回来咬你一口。