<video onclick> 在 Firefox 中

Question

Javascript onclick HTML 视频元素无效。

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

我会在视频 clicking/started 时将文本放入 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 写道：

Supported HTML tags: All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

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

Answer 1

备选方案：

使用 HTML Audio/Video DOM 结束活动。

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

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

Answer 2

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

您可以尝试点击Chrome中的播放按钮或时间轴，您会发现点击事件实际上已停止。

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

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

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

<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></video>

但一般情况下，你不需要监听点击事件，而是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;
}

<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></video>

<video onclick> 在 Firefox 中

<video onclick> in Firefox

html

javascript

firefox

html5-video