时间戳

首页 > 解决方案 > 为什么不

javascript - 为什么不

问题描述

为什么在加载页面后首次开始播放具有自动播放功能的视频时不会触发播放事件？

document.getElementById("vid").addEventListener('play', function, false);
<video id="vid" src="video.mp4" type="video/mp4" autoplay></video>

它应该触发我认为的播放事件，但不会。

这是设计使然吗？如果是这样，为什么？

手动按播放正常。

标签： javascripthtmlvideohtml5-videoaddeventlistener

解决方案

对于未来的用户，这可能是由于视频开始自动播放和添加事件处理程序之间的竞争条件造成的。

如果在视频已经开始播放之后添加处理程序，播放事件将不会触发。当在页面底部添加脚本并且上面的视频元素设置为自动播放时，可能会发生这种情况。

请参阅下面的片段：

// add the handler after 500ms which assumes the video is already playing
setTimeout(() => {
  document.querySelector('#vid').addEventListener('play', (e) => {
    console.info('playing');
  });;
}, 500);

// this will fire as expected
// document.querySelector('#vid').addEventListener('play', (e) => {
//  console.info('playing');
// });;
<video height="100px" id="vid" src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" autoplay controls></video>

推荐阅读