How to pause a HTML5 video on an event?
我正在全屏背景下使用 HTML5-<video> 构建网站。有一些 形状的页面在使用 SWF 容器播放器时变得可见，这会在两种媒体播放时导致严重的 CPU 性能问题。
所以我想添加一个简单的 javascript 命令，当 project- 变得可见时暂停背景视频。如果它在关闭/隐藏时再次恢复播放会很好。
提前致谢。
1
| document.getElementById('myvideotag').pause(); |
请注意，没有 stop() 方法。在显示/隐藏 DIV 的功能中，将播放/暂停功能放在那里。
这里有更多资源：http://www.digitaria.com/blogs/html5-video-skinning-tutorial-part-2-play-buttons
- 暂停有效。谢谢！我已通读您链接的文章。非常有趣，再次感谢。现在我想在调用某个函数时恢复播放 (...) 是否有类似 js 中的监听函数在触发时播放 ()s 的东西？编辑：我应该提到我在处理 CMS 模板时对网站结构的访问权限有限。我无法自己进入特定的锚点级别以在那里添加 javascript 函数。
-
您只需在应该恢复播放的函数中使用 .play() 方法。
-
我是这么认为的，因此我进行了编辑。我无法在该级别添加代码行。该脚本将写入包含页面特定内容的 CMS 文本区域。我想我需要一个"监视"函数来监听特定函数是否被调用。
-
您可以使用 SCRIPT 标记在页面上的任何位置添加脚本。
-
我知道这一点。我想我想使用 EventListener 方法。由于我对 Javascript 有点熟悉，我想我自己已经弄清楚了。不过，我会很感激任何帮助。
-
你想触发 play() 什么事件？
-
我希望 onclick="hideTheDiv()" 触发 play()。正如我在第一条评论中所说。
-
并且您不能修改 hideTheDiv() 函数或锚标记？
-
不，锚点和链接的 js 文件是我无法触及的。我尝试了一个事件处理程序来监视锚点。还没有工作，有什么想法吗？ :) <script type="text/javascript"> document.getElementById('mainbg').pause(); function findFirstDescendant(parent, tagname) { parent = document.getElementByClass(parent); var descendants = parent.getElementsByTagName(tagname); if ( descendants.length ) return descendants[0]; return null; } var header = findFirstDescendant("project_index","a"); header.onclick = function () { document.getElementById('mainbg').play(); };
-
您想要触发 play() 的锚点是否有名称或 ID？我认为它没有，因为你有 findFirstDescendant 功能。
-
确切地。锚点本身没有 id、类或名称。只是一个 href="#" 和 onclick="..."。 'mainbg' 是背景视频，project_index 是包含链接的 的类。抱歉，格式糟糕，formatting 似乎不起作用。
-
我让它工作了！没有注意到 CMS 会将换行符解析为 <br /> a€|把它全部放在一行中，事实上，它有效。不得不再次添加原始的onclick-function，但它运行顺利。非常感谢埃文，你拯救了我的夜晚：D
-
备选：var allAnchors = document.getElementsByTagName("a"); \\\\tvar theAnchor; \\\\tfor (var i = 0; i < allAnchors.length; i ) \\\\t{ \\\\t\\\\tif (allAnchors.item(i).parentNode.className == "project_index") \\\\t\\ \\t{ \\\\t\\\\t\\\\ttheAnchor = allAnchors.item(i); \\\\t\\\\t\\\\tbreak; \\\\t\\\\t} \\\\t} \\\\t \\\\t//做任何事情 \\\\ttheAnchor.onclick = document.getElementById("mainbg").play();
我个人最喜欢的是添加到 html 属性的小型 onclick 处理程序，如下所示：
1
| <video onclick="this.paused? this.play() : this.pause()"> |
因为在 div hide/show 上没有传统事件，所以当你调用使你的 div 出现/消失的函数时，你必须播放()和暂停()你的视频元素