Javascript弹出框播放电影后关闭

Question

I'm trying to create a javascript popup box with a Movie (.flv). It's has a option Close It . After press the Close it link the popup will disappear. But I want to disappea this popup box after play the movie. Following is my code.

How can i do it with javascript code ?

Html Head section code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2
/jquery.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {  

    var id = '#dialog';

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect     
    $('#mask').fadeIn(1000);    
    $('#mask').fadeTo("slow",0.8);  

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

    //transition effect
    $(id).fadeIn(2000);     

//if close button is clicked


$('.window .close').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();     
    $('#mask').hide();
    $('.window').hide();
});     

//if mask is clicked
$('#mask').click(function () {
    $(this).hide();
    $('.window').hide();

});     

});

</script>

Html body section code:

<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
<a href="#" class="close">Close it</a>
<br/><br/>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="450" 
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="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&
amp;streamName=Animation&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="700" height="450">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&
amp;streamName=Animation&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>
  <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
  <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>
<br/><br/>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask">    
</div>
</div>
<script type="text/javascript">
 swfobject.registerObject("FLVPlayer");
</script>
</center>

Answer 1

Instead of this line

<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&
amp;streamName=Animation&amp;autoPlay=true&amp;autoRewind=false" />

use

<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&
  amp;streamName=Animation&amp;autoPlay=true&amp;autoRewind=false&amp;javascriptCallbackFunction=onJavaScriptBridgeCreated" />

and use

function onJavaScriptBridgeCreated(playerId)
{
    var player = document.getElementById(playerId);
    player.addEventListener("complete", "completeFunc");
}
function completeFunc() {
    console.log('Complete!');
    $('.window .close').click();
}

SOURCE OF Above information

to close after 5 seconds you need

setTimeout(function(){
$('.window .close').click();
},5000);