如何在事件中暂停 HTML5 视频？

Posted 2023-05-07

【中文标题】如何在事件中暂停 HTML5 视频？

【英文标题】：How to pause a HTML5 video on an event?

【发布时间】：2011-05-08 12:09:46

【问题描述】：

我正在全屏背景下使用 html5-<video> 构建网站。 <div>s 形状的页面通过 SWF 容器播放器变得可见，这会在两种媒体播放时导致严重的 CPU 性能问题。 所以我想添加一个简单的 javascript 命令，当项目-<div> 可见时暂停背景视频。如果它在关闭/隐藏时再次恢复播放会很好。

提前致谢。

【参考方案1】：

document.getElementById('myvideotag').pause();

请注意，没有 stop() 方法。在显示/隐藏 DIV 的功能中，将播放/暂停功能放在那里。

更多资源在这里：http://www.digitaria.com/blogs/html5-video-skinning-tutorial-part-2-play-buttons

【讨论】：

暂停有效。谢谢！我已经阅读了您链接的文章。非常有趣，再次感谢。现在我想在调用某个函数时恢复播放（<a href="#" onclick="hideTheDiv(...)">...</a>） js 中是否有类似监听函数的东西，当触发时播放（）s？编辑：我应该提到，当我正在处理 CMS 模板时，我只能有限地访问网站结构。我自己无法进入特定的锚级别以在其中添加 javascript 函数。

您只需在应该恢复播放的函数中使用.play() 方法。

我是这么认为的，因此我进行了编辑。我无法在该级别添加代码行。该脚本将被写入包含页面特定内容的 CMS 的文本区域。我想我需要一个“监视”函数来监听特定函数是否被调用。

您可以使用 SCRIPT 标签在页面的任何位置添加脚本。

我知道这一点。我想我想使用 EventListener 方法。由于我对 Javascript 有点迷恋，我想我自己已经弄清楚了。不过，我将不胜感激。

【参考方案2】：

我个人最喜欢的是添加到 html 属性的小 onclick 处理程序，如下所示：

<video onclick="this.paused? this.play() : this.pause()">

【参考方案3】：

由于 div hide/show 上没有传统事件，因此当您调用使您的 div 出现/消失的函数时，您必须播放（）和 pause（）您的视频元素