Firefox 中的 <video onclick>答案

【问题标题】：<video onclick> in FirefoxFirefox 中的 <video onclick>
【发布时间】：2019-09-27 06:27:14
【问题描述】：

HTML 视频元素上的 JavaScript onclick 不起作用。

编辑：在 Firefox（66.0.5（64 位））中不起作用。在 Chrome (74.0.3729.131) 中有效。
控制台中没有错误。

当视频被点击/开始时，我会在一个 div 框中输入一个文本（等待视频的长度）。

function myfunction () {
  console.log("onclick");
  document.getElementById("videotextbox").innerHTML = "VIDEO-INFO";
}

<div>
  <video onclick="myfunction()" id="videoid" width="600" controls>
    <source src="myvideo.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>

<div id="videotextbox"></div>

w3schools 写道：

支持的 HTML 标签：所有 HTML 元素，除了：、、
、、、、<meta>、<param>、<script>、<样式> 和 <title></script>

请提供一个没有 jquery 或 ajax 的解决方案。

【问题讨论】：

您遇到什么错误？你检查你的控制台日志了吗？
您的代码运行良好。你一定有另一个问题。见jsfiddle.net/RezaScript/bwd98xtn
这里有什么问题？
是的。我已经检查了您的代码工作正常。我认为还有另一个问题。请检查控制台并找出问题
在 mozilla 中它不工作，但在 chrome 中代码工作正常。

标签： javascript html firefox html5-video

【解决方案1】：

这是因为controls。当用户单击 MediaElements 的控件时，没有浏览器会公开。

您可以尝试在 Chrome 中点击播放按钮或时间线，您会看到点击事件实际上已停止。

在 Firefox 中，这些控件覆盖了整个视频元素，因此，您的元素不会有任何点击事件。 _{（从技术上讲，Chrome 也是，我怀疑这是a bug they left，当他们制作更新的播放器时）。}

所以如果你真的需要点击事件，那就不要设置controls属性：

document.querySelector('video').onclick = e => 
  console.log('clicked');

&lt;video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm" autoplay&gt;&lt;/video&gt;

但是一般情况下，你不需要监听点击事件，而是Media events比如playing、pause、seek等。

const vid = document.querySelector('video');

['playing', 'pause', 'seeked', 'ended'].forEach(t => 
   vid.addEventListener(t, e => console.log(t))
);

video{
  max-height: 100vh;
  margin-bottom: 100px;
}

&lt;video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm" controls&gt;&lt;/video&gt;

【讨论】：

“MediaEvents”就是解决方案。但是，为什么最后是“暂停”而不是“结束”？
@suka 因为我没有为结束的事件添加监听器。

【解决方案2】：

替代解决方案：

使用 HTML 音频/视频 DOM 结束事件。

var myvideo = document.getElementById("videoid");
myvideo.onended = function() {
  document.getElementById("videotextbox").innerHTML = "VIDEO-INFO";
};

https://www.w3schools.com/tags/av_event_ended.asp

【讨论】：