如何在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(); 
}