點選預覽按鈕，彈出視窗自動播放視訊檔案，并伴有遮罩層
從網上自行下載下傳jquery-1.11.2.min.js（版本自己選擇）和flvplayer.swf檔案。需要注意的是網上一般有兩個版本的flvplayer.swf。
1、第一種flvplayer.swf（将下面的代碼嵌套到demo.html中）
<p id="player1">
<script type="text/javascript">
var s1 = new SWFObject("flvplayer.swf","single","1000","600","10");
s1.addParam("allowfullscreen","true");
//檔案引用為file
s1.addVariable("file","test1.mp4");
//是否自動播放，true：是，false：否
s1.addVariable("autostart","true");
//是否循環播放，true：是，false：否
s1.addVariable("repeat","true");
s1.addVariable("image","preview.png")
s1.addParam("width","1000");
s1.addParam("height","600");
s1.write("player1");
</script>
</P>
生成的代碼為：
效果：
2、第二種flvplayer.swf（将下面的代碼嵌套到demo.html中）
<p id="player1">
<script type="text/javascript">
var s1 = new SWFObject("flvplayer.swf","single","1000","600","10");
s1.addParam("allowfullscreen","true");
//檔案引用為vcastr_file
s1.addVariable("vcastr_file","test1.mp4");
s1.addVariable("image","preview.png")
//是否自動播放，1：是，0：否
s1.addVariable("IsAutoPlay","1");
//是否循環播放，1：是，0：否
s1.addVariable("IsContinue","1");
s1.addParam("width","1000");
s1.addParam("height","600");
s1.write("player1");
</script>
</P>
生成的代碼為：
效果：
需要根據自己所下載下傳的flvplayer.swf判斷使用哪種，并注意差別。
demo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="古成"/>
<title>彈出全屏遮罩層播放視訊</title>
<script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body>
<a class="btnDel" href="#" style="font: '微軟雅黑';font-size: 14px;width: 125px;height: 33px;cursor: pointer;">觀看電影</a>
<div class="box-mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;background: #000; opacity: 0.5; filter: alpha(opacity=50);z-index: 99;display: none;"></div>
<div class="box" style="position: absolute; width: 1000px; height: 620px; line-height:620px; text-align: center; z-index: 101;display: none;">
<input class="btnCancel" style="float:right;" type="button" value="關閉">
<div class="demo" style="width:100%; height:100%;margin:0 auto;">
<p id="player1">
//根據所下flvplayer.swf，參考上面說的修改
<script type="text/javascript">
var s1 = new SWFObject("flvplayer.swf","single","1000","600","10");
s1.addParam("allowfullscreen","true");
s1.addVariable("file","test1.mp4");
s1.addVariable("autostart","true");
s1.addVariable("repeat","true");
s1.addParam("width","1000");
s1.addParam("height","600");
s1.write("player1");
</script>
<!--<embed src="Flvplayer1.swf" allowfullscreen="true" flashvars="vcastr_file=video.mp4&IsAutoPlay=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="200"></embed>-->
</p>
</div>
</div>
<script src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
test.js
/**
* Created by Administrator on 2017/9/30.
*/
$(document).ready(function() {
var isOpen = ;
//全局變量，判斷是否已經打開彈出框
$(".btnDel").click(function() {
//$(".box-mask").css({"display":"block"});
$(".box-mask").fadeIn();
center($(".box"));
//載入彈出視窗上的按鈕事件
checkEvent($(this).parent(), $(".btnSure"), $(".btnCancel"));
setTimeout(function () {
$("#single").trigger("click");
},);
});
function center(obj) {
//obj這個參數是彈出框的整個對象
var screenWidth = $(window).width(), screenHeigth = $(window).height();
//擷取螢幕寬高
var scollTop = $(document).scrollTop();
//目前視窗距離頁面頂部的距離
var objLeft = (screenWidth - obj.width()) / ;
///彈出框距離左側距離
var objTop = (screenHeigth - obj.height()) / + scollTop;
///彈出框距離頂部的距離
obj.css({
left:objLeft + "px",
top:objTop + "px"
});
obj.fadeIn();
//彈出框淡入
isOpen = ;
//彈出框打開後這個變量置1 說明彈出框是打開裝填
//當視窗大小發生改變時
$(window).resize(function() {
//隻有isOpen狀态下才執行
if (isOpen == ) {
//重新擷取資料
screenWidth = $(window).width();
screenHeigth = $(window).height();
var scollTop = $(document).scrollTop();
objLeft = (screenWidth - obj.width()) / ;
var objTop = (screenHeigth - obj.height()) / + scollTop;
obj.css({
left:objLeft + "px",
top:objTop + "px"
});
obj.fadeIn();
}
});
//當滾動條發生改變的時候
$(window).scroll(function() {
if (isOpen == ) {
//重新擷取資料
screenWidth = $(window).width();
screenHeigth = $(window).height();
var scollTop = $(document).scrollTop();
objLeft = (screenWidth - obj.width()) / ;
var objTop = (screenHeigth - obj.height()) / + scollTop;
obj.css({
left:objLeft + "px",
top:objTop + "px"
});
obj.fadeIn();
}
});
}
//導入兩個按鈕事件 obj整個頁面的内容對象，obj1為确認按鈕，obj2為取消按鈕
function checkEvent(obj, obj1, obj2) {
//确認後删除頁面所有東西
obj1.click(function() {
//移除所有父标簽内容
obj.remove();
//調用closed關閉彈出框
closed($(".box-mask"), $(".box"));
});
//取消按鈕事件
obj2.click(function() {
//調用closed關閉彈出框
closed($(".box-mask"), $(".box"));
});
}
//關閉彈出視窗事件
function closed(obj1, obj2) {
obj1.fadeOut();
obj2.fadeOut();
isOpen = ;
}
});
swfobject.js
if(typeof deconcept=="undefined"){var deconcept=new Object();}if(typeof deconcept.util=="undefined"){deconcept.util=new Object();}if(typeof deconcept.SWFObjectUtil=="undefined"){deconcept.SWFObjectUtil=new Object();}deconcept.SWFObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a){if(!document.getElementById){return;}this.DETECT_KEY=_a?_a:"detectflash";this.skipDetect=deconcept.util.getRequestParameter(this.DETECT_KEY);this.params=new Object();this.variables=new Object();this.attributes=new Array();if(_1){this.setAttribute("swf",_1);}if(id){this.setAttribute("id",id);}if(w){this.setAttribute("width",w);}if(h){this.setAttribute("height",h);}if(_5){this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));}this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion();if(!window.opera&&document.all&&this.installedVer.major>){deconcept.SWFObject.doPrepUnload=true;}if(c){this.addParam("bgcolor",c);}var q=_7?_7:"high";this.addParam("quality",q);this.setAttribute("useExpressInstall",false);this.setAttribute("doExpressInstall",false);var _c=(_8)?_8:window.location;this.setAttribute("xiRedirectUrl",_c);this.setAttribute("redirectUrl","");if(_9){this.setAttribute("redirectUrl",_9);}};deconcept.SWFObject.prototype={useExpressInstall:function(_d){this.xiSWFPath=!_d?"expressinstall.swf":_d;this.setAttribute("useExpressInstall",true);},setAttribute:function(_e,_f){this.attributes[_e]=_f;},getAttribute:function(_10){return this.attributes[_10];},addParam:function(_11,_12){this.params[_11]=_12;},getParams:function(){return this.params;},addVariable:function(_13,_14){this.variables[_13]=_14;},getVariable:function(_15){return this.variables[_15];},getVariables:function(){return this.variables;},getVariablePairs:function(){var _16=new Array();var key;var _18=this.getVariables();for(key in _18){_16[_16.length]=key+"="+_18[key];}return _16;},getSWFHTML:function(){var _19="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","PlugIn");this.setAttribute("swf",this.xiSWFPath);}_19="<embed type=\"application/x-shockwave-flash\" src=\""+this.getAttribute("swf")+"\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\" style=\""+this.getAttribute("style")+"\"";_19+=" id=\""+this.getAttribute("id")+"\" name=\""+this.getAttribute("id")+"\" ";var _1a=this.getParams();for(var key in _1a){_19+=[key]+"=\""+_1a[key]+"\" ";}var _1c=this.getVariablePairs().join("&");if(_1c.length>){_19+="flashvars=\""+_1c+"\"";}_19+="/>";}else{if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","ActiveX");this.setAttribute("swf",this.xiSWFPath);}_19="<object id=\""+this.getAttribute("id")+"\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\" style=\""+this.getAttribute("style")+"\">";_19+="<param name=\"movie\" value=\""+this.getAttribute("swf")+"\" />";var _1d=this.getParams();for(var key in _1d){_19+="<param name=\""+key+"\" value=\""+_1d[key]+"\" />";}var _1f=this.getVariablePairs().join("&");if(_1f.length>){_19+="<param name=\"flashvars\" value=\""+_1f+"\" />";}_19+="</object>";}return _19;},write:function(_20){if(this.getAttribute("useExpressInstall")){var _21=new deconcept.PlayerVersion([,,]);if(this.installedVer.versionIsValid(_21)&&!this.installedVer.versionIsValid(this.getAttribute("version"))){this.setAttribute("doExpressInstall",true);this.addVariable("MMredirectURL",escape(this.getAttribute("xiRedirectUrl")));document.title=document.title.slice(,)+" - Flash Player Installation";this.addVariable("MMdoctitle",document.title);}}if(this.skipDetect||this.getAttribute("doExpressInstall")||this.installedVer.versionIsValid(this.getAttribute("version"))){var n=(typeof _20=="string")?document.getElementById(_20):_20;n.innerHTML=this.getSWFHTML();return true;}else{if(this.getAttribute("redirectUrl")!=""){document.location.replace(this.getAttribute("redirectUrl"));}}return false;}};deconcept.SWFObjectUtil.getPlayerVersion=function(){var _23=new deconcept.PlayerVersion([,,]);if(navigator.plugins&&navigator.mimeTypes.length){var x=navigator.plugins["Shockwave Flash"];if(x&&x.description){_23=new deconcept.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."));}}else{if(navigator.userAgent&&navigator.userAgent.indexOf("Windows CE")>=){var axo=;var _26=;while(axo){try{_26++;axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+_26);_23=new deconcept.PlayerVersion([_26,,]);}catch(e){axo=null;}}}else{try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");}catch(e){try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");_23=new deconcept.PlayerVersion([,,]);axo.AllowScriptAccess="always";}catch(e){if(_23.major==){return _23;}}try{axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");}catch(e){}}if(axo!=null){_23=new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[].split(","));}}}return _23;};deconcept.PlayerVersion=function(_29){this.major=_29[]!=null?parseInt(_29[]):;this.minor=_29[]!=null?parseInt(_29[]):;this.rev=_29[]!=null?parseInt(_29[]):;};deconcept.PlayerVersion.prototype.versionIsValid=function(fv){if(this.major<fv.major){return false;}if(this.major>fv.major){return true;}if(this.minor<fv.minor){return false;}if(this.minor>fv.minor){return true;}if(this.rev<fv.rev){return false;}return true;};deconcept.util={getRequestParameter:function(_2b){var q=document.location.search||document.location.hash;if(_2b==null){return q;}if(q){var _2d=q.substring().split("&");for(var i=;i<_2d.length;i++){if(_2d[i].substring(,_2d[i].indexOf("="))==_2b){return _2d[i].substring((_2d[i].indexOf("=")+));}}}return "";}};deconcept.SWFObjectUtil.cleanupSWFs=function(){var _2f=document.getElementsByTagName("OBJECT");for(var i=_2f.length-;i>=;i--){_2f[i].style.display="none";for(var x in _2f[i]){if(typeof _2f[i][x]=="function"){_2f[i][x]=function(){};}}}};if(deconcept.SWFObject.doPrepUnload){if(!deconcept.unloadSet){deconcept.SWFObjectUtil.prepUnload=function(){__flash_unloadHandler=function(){};__flash_savedUnloadHandler=function(){};window.attachEvent("onunload",deconcept.SWFObjectUtil.cleanupSWFs);};window.attachEvent("onbeforeunload",deconcept.SWFObjectUtil.prepUnload);deconcept.unloadSet=true;}}if(!document.getElementById&&document.all){document.getElementById=function(id){return document.all[id];};}var getQueryParamValue=deconcept.util.getRequestParameter;var FlashObject=deconcept.SWFObject;var SWFObject=deconcept.SWFObject;