点击 YouTube 时禁用 HTML5 <video> 的播放/暂停/全屏

Posted 2023-05-08

【中文标题】点击 YouTube 时禁用 HTML5 <video> 的播放/暂停/全屏

【英文标题】：Disable play/pause/full screen for HTML5 <video> on click for YouTube

【发布时间】：2015-04-07 23:41:18

【问题描述】：

有没有办法让我们通过 javascript 禁用 html5 视频的“播放/暂停/点击全屏”功能，然后在我们再次需要时将其放回去？

【问题讨论】：

这应该可以帮助您解决问题***.com/questions/14101874/…

也许可以，但 HTML5 视频没有这样的功能。您还必须有一些自定义 JS，如果没有更多信息，您无法猜测如何调整。

@dandavis 哦，我正在为 YouTube 开发 chrome 扩展程序。你知道他们在用什么吗？

不，我不知道，您需要深入了解您正在使用的代码，包括 youtube 的代码。我确信 youtube 代码是一团糟，所以这可能很难。但是，我知道放置在视频上的透明 div 会阻止所有点击...

您能解释一下这个问题与 YouTube 的关系吗？是关于嵌入您网站的 YouTube 视频吗？

【参考方案1】：

我不知道你是否可以禁用它们，但你可以使用 css 删除它们。

video::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-play-button, video::-webkit-media-controls-pausebutton 
    display: none;

http://jsfiddle.net/4ce23z2a/

我希望这会有所帮助。

【讨论】：

嘿，感谢您的回答，但仅删除控件并不能解决我的问题，因为您仍然可以单击视频来控制它。

【参考方案2】：

我不确定为什么 <video> 不尊重 event.preventDefault();

我解决这个问题的方式很老套。我只是覆盖父 div 的 click 和 dblclick 事件来解决我的问题，因为我只想防止暂停/播放/全屏。

【参考方案3】：

下面的行可以解决这个目的。

video.removeAttribute('controls');

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。