我正在尝试使用电影(.flv)创建一个javascript弹出框。它有一个选项关闭它。按关闭它链接后,弹出窗口将消失。但是我想在播放电影之后消失这个弹出框。以下是我的代码。
我如何使用javascript代码执行此操作?
Html Head部分代码:
<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正文部分代码:
<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="&MM_ComponentVersion=1&skinName=Clear_Skin_1&
amp;streamName=Animation&autoPlay=true&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="&MM_ComponentVersion=1&skinName=Clear_Skin_1&
amp;streamName=Animation&autoPlay=true&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>
答案 0 :(得分:1)
而不是这一行
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&
amp;streamName=Animation&autoPlay=true&autoRewind=false" />
使用
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&
amp;streamName=Animation&autoPlay=true&autoRewind=false&javascriptCallbackFunction=onJavaScriptBridgeCreated" />
并使用
function onJavaScriptBridgeCreated(playerId)
{
var player = document.getElementById(playerId);
player.addEventListener("complete", "completeFunc");
}
function completeFunc() {
console.log('Complete!');
$('.window .close').click();
}
在5秒后关闭,你需要
setTimeout(function(){
$('.window .close').click();
},5000);