如何阻止视频在隐藏的 DIV 中播放答案

【问题标题】：How to stop video from playing in hidden DIV如何阻止视频在隐藏的 DIV 中播放
【发布时间】：2013-03-17 21:52:19
【问题描述】：

这里是 JavaScript：

function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
        item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
}

这是 HTML：

<a href="javascript:unhide('verizon');">VERIZON<br>
<a href="javascript:unhide('sap');">SAP</a><br>

<div id="sap" class="hidden">
    <embed src="videos/sap.mov" height="270" width="480" scale="tofit"></embed>
</div>
<div id="verizon" class="hidden">
    <embed src="videos/verizon.mov" height="270" width="480" scale="tofit"></embed>
</div>

当我点击 SAP 时，视频会播放。当我点击 Verizon 时，它也会播放，但 SAP 视频会继续播放，即使它被隐藏了。

我对 javascript 很陌生。

有没有更好的方法来做到这一点？如何修复已有的代码？

【问题讨论】：

确保您标记了相应的答案。它使人们更愿意回答您未来的问题。

标签： javascript video show-hide mov

【解决方案1】：

你可以这样做：

function unhide(divID) {
 var item = document.getElementById(divID);
 var other = {"verizon":"sap","sap":"verizon"};
 if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
    var tar = document.getElementById(other[divID]);
    tar.className = 'hidden';
    tar.getElementsByTagName("embed")[0].stopVideo();
 }
}

Other 只是一个对象，可以轻松访问要停止的视频的 id。它使用 divID 中的字符串来获取另一个字符串。

然后，一旦你有了另一个元素，你就会遍历它的子元素以找到 embed 元素。 [0] 用于获取第一个匹配元素（您的视频）。然后你可以在它上面使用javascript的stopVideo()方法来停止视频。

【讨论】：

谢谢特拉维斯。我不确定这是否有效。我可能对自己的解释有误。当我单击 SAP 时，视频显示。如果我单击 Verizon，来自 Verizon 的音频也会开始播放。除非我再次单击 SAP 以“隐藏”它，否则我看不到 Verizon 视频。也许这是 HTML 的问题？感谢您的帮助！
@user2180362 - 当你显示当前的时候尝试隐藏另一个，我在编辑中显示了这一行：tar.className = 'hidden';

【解决方案2】：

我首选的解决方案是将该 div 的 HTML 设置为 null，而不是尝试操纵其中的内容以使其关闭。毕竟它是隐藏的，为什么还要把它留在那里。

document.getElementByID('div').innerHTML = "";

从而彻底清除其中的任何东西。

并取消隐藏它（请注意，您可能需要对此稍作调整才能使引号正常运行）

document.getElementByID('div').innerHTML = '<embed src="videos/sap.mov" height="270" width="480" scale="tofit"></embed>';

我认为对于 Flash 或像视频播放器这样的重元素来说，这将是一个更好的解决方案，想象一个页面隐藏了 30 个这样的元素，它会陷入困境。

【讨论】：