在火狐中,javascript,html,firefox,html5-video"/>
时间戳

首页 > 解决方案 >

javascript -

问题描述

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 元素，除了：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>、和 <标题>

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

标签： javascripthtmlfirefoxhtml5-video

解决方案

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

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

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

所以如果你真的需要点击事件，那么不要设置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 事件，例如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>

推荐阅读