如何在ie8中隐藏div时停止视频？

Question

我写了一些JavaScript，当有人点击图片时会显示一个视频，然后他们可以点击“x”关闭视频，但是当隐藏视频时，视频继续播放，但在FireFox和Chrome浏览器停止播放。如果任何人都可以告诉我如何通过让视频在点击“xbutton”图像时停止来解决这个问题，我将不胜感激，我一直在为此奋战数小时。这是我对JavaScript的支持：

function toggle(div_id) { 
     var el = document.getElementById(div_id); 
     if (el.style.display == 'none') { el.style.display = 'block';} 
     else {el.style.display = 'none';} } 

    function blanket_size(popUpDivVar) { 
     var blanket = document.getElementById('blanket'); 
     blanket_height = document.body.parentNode.scrollHeight;   
     blanket.style.height = blanket_height + 'px'; 
      } 

    function popup(windowname) { 
     blanket_size(windowname);  
     toggle('blanket'); 
     toggle(windowname); 
      } 

这是我正在使用的html。我只是使用Dreamweaver从我的电脑添加.flv视频文件。

<div id="blanket" style="display:none;"></div> 
    <div id="popUpDiv" style="display:none;"> 
    <a href="#popUpDiv" onclick="popup('popUpDiv')"><img 
    src="../New images/newxbtn-red.png" class ="xbutton" alt = "Close"/></a> 
    <p> Video Header</p> 
    <!--Dreamweaver video code starts here --> 
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="622" 
    height="350" id="FLVPlayer"> 
    <param name="movie" value="FLVPlayer_Progressive.swf" /> 
    <param name="quality" value="high" /> 
    <param name="wmode" value="opaque" /> 
    <param name="scale" value="noscale" /> 
    <param name="salign" value="lt" /> 
    <param name="allowScriptAccess" value="always" /> 
    <param name="FlashVars" 
    value="&amp;MM_ComponentVersion=1&amp;skinName=Halo_Skin_3&amp;streamName=video/bf- 
    eng&amp;autoPlay=true&amp;autoRewind=false" /> 
    <param name="swfversion" value="8,0,0,0" /> 
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download 
    the latest version of Flash Player. Delete it if you don’t want users to see the 
    prompt. --> 
    <param name="expressinstall" value="Scripts/expressInstall.swf" /> 
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> 
    <!--[if !IE]>--> 
    <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" 
    width="622" height="350"> 
    <!--<![endif]--> 
    <param name="quality" value="high" /> 
    <param name="wmode" value="opaque" /> 
    <param name="scale" value="noscale" /> 
    <param name="salign" value="lt" /> 
    <param name="allowScriptAccess" value="always" /> 
    <param name="FlashVars" 
    value="&amp;MM_ComponentVersion=1&amp;skinName=Halo_Skin_3&amp;streamName=video/bf- 
    eng&amp;autoPlay=true&amp;autoRewind=false" /> 
    <param name="swfversion" value="8,0,0,0" /> 
    <param name="expressinstall" value="Scripts/expressInstall.swf" /> 
    <!-- The browser displays the following alternative content for users with Flash 
    Player 
    6.0 and older. -->' 
    <div> 
    <p><a href="http://www.adobe.com/go/getflashplayer"><img 
    src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
    alt="Get Adobe Flash player" /></a></p> 
    </div> 
    <!--[if !IE]>--> 
    </object> 
    <!--<![endif]--> 
    </object> 
    <!-- Video Ends --> 
    </div> 
    <div class ="image"> 
    <a href="#popUpDiv" onclick="popup('popUpDiv')"> 
    <img src="img/farmers/Donahue_Beef.jpg" width="190" height="110" alt="Beef" /> 
    <img src="../New images/playbtn.png" width="200" height="116" alt="Play" class = 
    "play"/></a> 
    </div> 

再次感谢！

Answer 1

首先，你要听你的xbutton元素的click事件（我建议加一个ID）：

function listen(event, elem, func) { 
    if (elem.addEventListener) { 
    elem.addEventListener(event, func, false); 
    } else if (elem.attachEvent) { 
    elem.attachEvent(event, func); 
    } 
} 

listen('load', window, function() { 
    var xbutton = document.getElementById('xbutton'); 
    var player = document.getElementById('FLVPlayer'); 
    listen('click', xbutton, function(e) { 
    player.Stop(); 
    e.preventDefault(); 
    }); 
}); 

您可以使用JavaScript方法Stop()停止您的Flash视频。

Answer 2

使用jQuery可能有一种非常简单的方法。在我的情况下，我生成了一个带有对象的Flash嵌入div。使用jQuery，您可以轻松定义一个关闭按钮，并点击empty()函数。这会清除div的内容，并且视频不再位于DOM中。

$("#video a.close").click(function(){ 
$("#flashlayer").empty(); 
}