如何禁用 youtube 中视频元素的点击事件

Question

我目前正在为 YouTube 制作 chrome 扩展，我想禁用用户通过点击视频 pause/play 的选项。

我看到一些帖子说“video.off('click');”但它确实有效。

我也试过这个：

video.addEventListener('click', function(event){
    console.log("preventing?")
    event.preventDefault();
});

但它仍然什么也没做。

如果可能的话，我希望得到一些帮助 - 提前谢谢大家！

编辑：

我看到了评论，我想进一步完善我的问题。我需要一个解决方案来 仅禁用点击事件 以从那里停止 play/pause。

我还需要将答案写入javascript文件，因为我想控制用户是否可以点击视频。

我也查看了：Javascript code for disabling mouse click for youtube videos 但我还没有找到解决我的特定问题的正确方法。我看到一个建议在视频元素顶部添加透明覆盖的解决方案，但我不知道该怎么做以及如何在视频播放器本身调整大小时调整它的大小

Answer 1

我注意到一些显示 YouTube 视频的网站在播放器顶部放置了一个透明覆盖层，这样用户就无法点击“在 YouTube 中打开”图标。这也可能对您有所帮助，即使它可能仍然能够使用键盘将焦点放在控件上。

Answer 2

您可以在此处检查这两种实现方式：https://stackblitz.com/edit/web-platform-4oehg4?file=index.html （因此代码段无法嵌入 yt iframe 视频）

// HTML

 <div class="container">
      <iframe
        id="video2"
        width="100%"
        height="100%"
        src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
      ></iframe>
      <div class="overlay"></div>
    </div>

// CSS

.container {
  position: relative;
  width: 100%;
  height: 50%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

仅使用 CSS：

// HTML

  <iframe
      width="100%"
      height="50%"
      id="video"
      src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
    ></iframe>

// CSS

#video {
  pointer-events: none;
}

Answer 3

在 window 上附加一个 click 侦听器 + 通过为 addEventListener 的第三个参数指定 true 使用捕获阶段 + 使用 stopPropagation，这样您的侦听器将成为事件传播链中的第一个目标，即它将运行在网站的处理程序之前，因为网站通常不使用捕获阶段。

window.addEventListener('click', event => {
  if (event.target.matches('video')) {
    event.stopPropagation();
  }
}, true);

请注意，如果某些稀有站点使用完全相同的技巧，您仍然可以通过使用“run_at”声明您的内容脚本来覆盖它：“document_start”。

如何禁用 youtube 中视频元素的点击事件

How to disable click event on video element in youtube

html

javascript

dom

google-chrome-extension