如何修复干扰 Firefox 默认 HTML5 视频播放器的功能答案

【问题标题】：How to fix a function that's interfering with Firefox's Default HTML5 Video Player如何修复干扰 Firefox 默认 HTML5 视频播放器的功能
【发布时间】：2017-01-07 03:50:46
【问题描述】：

为什么

onclick="this.play();"

干扰 Firefox 的 HTML5 默认视频控件以及如何解决？

我有这个问题，我给我的海报一个 onclick 播放这个功能，它可以在除 Firefox 之外的浏览器上运行。 Firefox 的默认 HTML5 视频控件现在无法正常工作。如果您按下播放，它只会刷新该区域，播放按钮会重新出现，但视频永远不会播放。但是，如果您将视频跳过到某些部分，它将“最终”加载并播放。

代码如下：

<video id="bigvid3" poster="https://cdn.shopify.com/s/files/1/0641/4457/files/Very_Clean.jpg?
5718060450832183858" onclick="this.play();" preload="none" controls="controls" width="100%">
<source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.mp4"    type="video/mp4">
</video>

【问题讨论】：

标签： javascript jquery html firefox video

【解决方案1】：

刚刚尝试在 Firefox 上运行您的 sn-p，它确实没有按预期运行。如果这只是 Firefox 中的问题，那么我可以建议解决方法。

onclick="if(!$.browser.mozilla){this.play();}"

这段代码的作用是检查浏览器是否是firefox，如果是，什么也不做。这将允许您依赖默认的点击处理。

see the sample on codepen

【讨论】：

有趣。但现在点击海报似乎不会像以前那样使用修改后的解决方法播放视频。在 codepen 和找到视频的网站上，当我单击带有此标记的海报时，都不会播放
@JeffreyJames 我刚刚在 Firefox 43 和 chrome 上进行了测试。两者都玩得很好。你运行的是旧版浏览器吗？
这很奇怪。我正在使用最新版本的 chrome。火狐玩得很好。 IE 不使用解决方法。但是在chrome上它不播放。请知道我指的是单击图像以使视频播放，而不是单击底部的实际默认播放按钮。如有混淆，请见谅。
@JeffreyJames 哦...我实际上是在点击播放按钮。但我刚刚在所有 chrome 上尝试了你的原始代码，即 firefox。当我单击帖子图像时，它实际上可以工作。我的 Firefox 是 43 版
这可能是因为您在我将旧的 onclick 功能恢复到原始状态时尝试了它。我现在正在尝试另一个助手的新功能。

【解决方案2】：

您必须禁用 firefox 的默认控件。

document.getElementById('myVideo').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();
    }
});

在本例中将 myVideo 替换为您的视频 ID 为“bigvid3”。您将获得所需的功能。

如果您想了解更多信息，请参阅 this link，因为它也回答了这个问题。

【讨论】：

感谢 Ji_in_coding。通过他的代码，我能够找到这个问题的答案。祝你好运
确实如此。谢谢你们俩！我签出链接。里面有很多很好的信息