用链接包装 HTML5 视频 - 控件在 Firefox 上不起作用答案

【问题标题】：Wrapping HTML5 videos with links - controls does not work on Firefox用链接包装 HTML5 视频 - 控件在 Firefox 上不起作用
【发布时间】：2017-07-19 14:40:41
【问题描述】：

我想用链接标签包装 HTML5 视频：

<a href="yourpage.html">
  <video width="560" height="315" autoplay muted controls loop>
       <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
   </video>
</a>

它在 Chrome 和 Opera 上完美运行 - 我可以单击控件，例如暂停、播放、音量等。当您单击它时，我还可以单击我想转到另一个页面的链接。

但它在 Firefox 上根本不起作用 - 我不能仅点击控件。当我点击控件上的任何内容时，它会触发链接too！我希望它和 Chrome/Opera 一样工作。

有什么办法可以在 Firefox 上解决这个问题吗？

【问题讨论】：

似乎 Firefox 正在做它应该做的事情。通过将元素放在锚点中，单击该元素上的任意位置应触发锚点的默认行为（导航到href）。
IE 曾经是我们的痛点。现在 Firefox 终于赶上来了！

标签： html firefox

【解决方案1】：

解决方案可能是在更新 Firefox 吗？我不知道你使用的是哪个版本，但标签<video> 是 html5 中的新标签（你可能已经知道了），并不是所有版本的浏览器都接受它们。否则我会说这是 Firefox 本身的错误，而不是您的代码中的错误。

在 W3Schools 上有一个您需要的版本列表：klick me

添加了 VideoJS 链接

其他方式使用VideoJS，一个开源视频播放器

【讨论】：

我使用的是 51.0.1（64 位）和 Ubuntu。
我没有其他想法@teelou。愿你可以使用link 就像有人遇到同样的问题link
没问题。干杯！

【解决方案2】：

为什么不使用 iframe：

 <a href="yourpage.html">
   <iframe src="http://video.webmfiles.org/big-buck-bunny_trailer.webm"></iframe> 
 </a>

我认为这对 Firefox 和其他人来说都更好。

【讨论】：