Javascript 使用jwplayer.swf播放.flv flash视频的js弹出窗口
我必须在一个页面上有许多小缩略图，每一个都需要在单击时打开一个带有控件的全尺寸（640x480）视频。我建议使用fancybox：Javascript 使用jwplayer.swf播放.flv flash视频的js弹出窗口,javascript,flash,Javascript,Flash,我必须在一个页面上有许多小缩略图，每一个都需要在单击时打开一个带有控件的全尺寸（640x480）视频。我建议使用fancybox： 他们有一个带有“swf”的示例，我相信您可以根据自己的目的修改它。我很惊讶没有Javascript专家会这么做。我的解决方案是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
他们有一个带有“swf”的示例，我相信您可以根据自己的目的修改它。我很惊讶没有Javascript专家会这么做。我的解决方案是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PopUp Player using JWPlayer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
input
{
width: 300px;
height: 32px;
font: bold 13px Verdana, serif;
text-align: center;
color: #fe0320;
background: url(player.gif) repeat-x; // 1px wide, 32px high
cursor: pointer;
border: 0;
}
img
{
position: relative;
display: inline-block;
float: left;
border-width: 0;
margin: 0;
padding: 0;
font-size: 0;
cursor: pointer;
z-index: 1;
}
div.clickmecontainer
{
cursor: pointer;
}
div.clickme
{
position: absolute;
display: inline-block;
width: 79px;
top: 50%;
margin-top: -15px;
text-align: center;
color: white;
font-family: Journal;
font-size: 1.5em;
z-index: 2;
}
div.playerpopup
{
position: absolute;
top: 100px;
left: 100px;
z-index: 100;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('swfobject', '2.2');</script>
<script type="text/javascript">
var swf = false;
function addSwf(file, width, height, id)
{
clearSwf();
if((id != '') && (id != undefined))
{ // alert('The '+gid(id).nodeName+' element with id="' + id + '"\nTop: '+gid(id).style.top + '\nLeft: ' +gid(id).style.left );
gid('playerpopup').style.top = ((gid(id).style.top.replace( 'px', '') * 1) - 500) + 'px';
gid('playerpopup').style.left = ((gid(id).style.left.replace('px', '') * 1) + 60) + 'px';
setTimeout("swf = true;", 1000); // alert('New nTop: '+gid('playerpopup').style.top + '\nLeft: ' +gid('playerpopup').style.left );
}
else
{
gid('playerpopup').style.top = 'px';
gid('playerpopup').style.left = 'px';
setTimeout("swf = true;", 1000);
}
gid('playerpopup').innerHTML='<a id="player"class="player"href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Adobe Flash Player</a><div><input type="button" style="width:'+width+'px;" value="-- C L O S E --" onclick="clearSwf(); return false;"></div>';
var flashvars =
{
'file': file,
'frontcolor': 'd3d3d3',
'backcolor': '000000',
'lightcolor': '6d6c6b',
'screencolor': '373737',
'id': 'playerID',
'autostart': 'true'
};
var params =
{
'allowfullscreen': 'true',
'allowscriptaccess': 'always',
'wmode': 'opaque',
'bgcolor': '#FFFFFF'
};
var attributes =
{
'id': 'playerID',
'name': 'playerID'
};
swfobject.embedSWF('player.swf', 'player', width, height, '9.0.124', false, flashvars, params, attributes);
};
function clearSwf()
{
if(swf)
{
swfobject.removeSWF('playerID');
gid('playerpopup').innerHTML = '';
swf = false;
}
};
function gid(name)
{
return document.getElementById(name);
};
</script>
</head>
<body bgcolor="white";>
<div id="12345" style=" position:absolute; top:606px; left:120px; width:180px; height:30px; z-index:19;">
<img alt="Preview" src="Preview.jpg" width="80" height="60" onClick="addSwf('video.flv', 640, 503, this.parentNode.getAttribute('id'));" />
</div>
<div id="playerpopup" class="playerpopup"> </div>
</body>
</html>
使用JWPlayer弹出播放器
输入
{
宽度：300px；
高度：32px；
字体：粗体13px Verdana，衬线；
文本对齐：居中；
颜色：#fe0320；
背景：url（player.gif）repeat-x；//1px宽，32px高
光标：指针；
边界：0；
}
img
{
位置：相对位置；
显示：内联块；
浮动：左；
边框宽度：0；
保证金：0；
填充：0；
字号：0；
光标：指针；
z指数：1；
}
div.clickmecontainer
{
光标：指针；
}
div.clickme
{
位置：绝对位置；
显示：内联块；
宽度：79px；
最高：50%；
利润上限：-15px；
文本对齐：居中；
颜色：白色；
字体系列：期刊；
字号：1.5em；
z指数：2；
}
剧组
{
位置：绝对位置；
顶部：100px；
左：100px；
z指数：100；
}
load（'swfobject'，'2.2'）；
var swf=假；
函数addSwf（文件、宽度、高度、id）
{
清除wf（）；
如果（（id！=“”）和&（id！=未定义））
{//alert（“+gid（id）.nodeName+”元素，id=“+id+”\n顶部：“+gid（id）.style.top+”\n左侧：“+gid（id）.style.left”）；
gid（'playerpopup'）.style.top=（（gid（id）.style.top.replace（'px'，''））-500）+'px'；
gid（'playerpopup'）.style.left=（（gid（id）.style.left.replace（'px'，''））*1）+60）+'px'；
setTimeout（“swf=true；”，1000）；//警报（'New nTop:'+gid（'playerpopup'）.style.top+'\n左：'+gid（'playerpopup'）.style.left）；
}
其他的
{
gid（'playerpopup'）.style.top='px'；
gid（'playerpopup'）.style.left='px'；
setTimeout（“swf=true；”，1000）；
}
gid（'playerpopup'）。innerHTML=''；
无功闪络器=
{
“文件”：文件，
“frontcolor”：“D3”，
“背景色”：“000000”，
“lightcolor”：“6d6c6b”，
“屏幕颜色”：“373737”，
'id'：'playerID'，
“autostart”：“true”
};
变量参数=
{
“allowfullscreen”：“true”，
“allowscriptaccess”：“始终”，
“wmode”：“不透明”，
“bgcolor”：“FFFFFF”
};
变量属性=
{
'id'：'playerID'，
'name'：'playerID'
};
swfobject.embeddeswf（'player.swf'，'player'，宽度，高度，'9.0.124'，false，flashvars，params，attributes）；
};
函数clearSwf（）
{
如果（swf）
{
swfobject.removeSWF（'playerID'）；
gid（'playerpopup'）。innerHTML=''；
swf=假；
}
};
函数gid（名称）
{
返回文档.getElementById（名称）；
};
此外，它不使用任何JavaScript框架，因此保证可以与您的代码一起使用。您可以发布一个示例链接吗？谢谢，我看了这个和lightbox以及其他一些大约50美元的链接。他们没有一个做了我需要的。我无法确定是否有可能避免下面页面的模糊。无支持响应…您可以通过JS激活ShadowBox并将showOverlay选项设置为false，或者编辑实际的ShadowBox.JS并将showOverlay:true更改为showOverlay:false