如何在隐藏的DIV中停止播放视频

Question

下面是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非常陌生。

有没有更好的方法来做这件事？我如何修复我已经拥有的代码？

Answer 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();
 }
}

其他只是一个对象，它提供了对要停止的视频的id的容易访问。它使用divID中的字符串来获取另一个字符串。

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

Answer 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个这样的隐藏元素，它会变得非常麻烦。