单击<视频>与Firefox冲突'他的原生行为

Click handler on <video> conflicts with Firefox's native behaviour

本文关键字：原生 Firefox 视频 lt gt 单击 冲突      更新时间：2023-09-26

我使用默认的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将这个功能添加到播放器中。所以现在你只能通过右键点击并选择播放来播放视频——普通的点击会首先通过原生行为播放视频，然后通过我的点击处理程序立即暂停。可怕的所以我想出了一个JavaScript函数，大概是这样的：

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

我一直纠结于如何检查浏览器版本？我试过的所有版本都返回了Firefox的版本号是5……我认为这来自Netscape部分。

您需要防止点击事件的默认行为，就像您自己用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时，或者当你的一个用户试图在任天堂DS或其他平台上使用你的网站时，它几乎不可避免地会反噬你。

可能有更好的方法来处理这个问题，但我想到了一个：我查看了Firefox 35的发布说明，在35中所做的更改之一似乎是修复了一个错误，根据规范，一个名为.hasAttributes()的方法本应位于Element上，但它以前位于Node上。所以，尽管它看起来很奇怪，但你可以做一些类似的事情：

if(typeof InstallTrigger !== 'undefined' && 
   typeof Element.prototype.hasAttributes !== 'undefined') {
    // is Firefox >= 35
}

这是基于typeof InstallTrigger !== 'undefined'会根据这个答案识别Firefox的事实，并且我们知道.hasAttributes从版本35开始移动到Element。这比用户代理解析更可取，因为与用户代理字符串不同，它不太可能以任何方式被欺骗。

评论中提到，通过检查不相关的JavaScript对象的存在来进行某种形式的浏览器检测似乎很奇怪，但这是一种既定的做法，历史上一直用于检测特定浏览器的版本大于特定版本：以下是一篇文章，描述了可用于检测互联网的常用变量Explorer版本>=给定的数字。

相关文章：