我必须在页面上有许多小缩略图,每个人点击时需要打开一个全尺寸(640x480)的带有控件的视频。js弹出窗口使用jwplayer.swf播放.flv Flash视频
回答
我很惊讶没有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>
谢谢我看着这个和灯箱和其他一些花费大约50美元。他们没有做我所需要的。 – 2010-05-27 07:03:58
当然:)它也被一些漂亮的主要网站使用,比如http://www.woot.com – 2010-05-27 07:05:27
我用Shadowbox.js之前,很高兴它(视频的例子是在主页上更低)。您可以嵌入YouTube视频,您自己的.flv文件(使用JW Player),Vimeo视频等。
此外,它不使用任何JavaScript框架,因此它可以保证与您的代码一起工作。
我无法确定是否有可能避免页面模糊不清。没有回应支持... – 2010-05-27 07:46:46
您可以通过JS激活ShadowBox并将showOverlay选项设置为false,或编辑实际的shadowbox.js并更改showOverlay:true以showOverlay:false – 2010-05-27 08:53:13
- 1. flv视频播放后的Flash交互
- 2. 播放视频文件时弹出DirectShow视频窗口
- 3. 弹出窗口中的JW播放器:播放器不弹出第二弹出窗口
- 4. 如何在弹出窗口中播放YouTube视频?
- 5. 不能让fancybox弹出窗口并播放我的YouTube视频
- 6. 在Bootstrap模式弹出窗口中播放视频
- 7. 弹出窗口中的Youtube视频不会停止播放当窗口关闭
- 8. 使用Flash'离线'播放视频
- 9. 使用Eval播放Flash视频。
- 10. 在Flash播放器中播放视频
- 11. 动态Flash FLV播放器
- 12. Flash视频慢/不播放
- 13. 获得Flash视频播放
- 14. 如何关闭视频播放期间出现的弹出窗口?
- 15. ios MPMoviePlayerController通过窗口播放视频
- 16. 在mediaelement.js中播放FLV视频
- 17. 在ShadowBox中播放FLV视频
- 18. 在SWFobject中播放FLV视频
- 19. 在JSP/Java EE中播放FLV视频
- 20. 在android中播放flv视频
- 21. 在图层弹出窗口中显示Flash视频
- 22. 仅当弹出窗口打开时自动播放音频
- 23. Flash中的弹出窗口
- 24. 如何使用Asp.net Flash视频控件播放视频文件?
- 25. 如何弹出视频播放器窗口,而在图片的点击
- 26. 播放.MP4和.FLV的Silverlight视频播放器
- 27. 如何在Android上使用Adove Flash播放Flash视频
- 28. 如何在快速时间和Flash播放器(FLV播放器)上播放窗口网络服务器上的MP4视频
- 29. 使用vlcj播放视频时出错
- 30. 使用UIWebView播放视频时出错
你能发表一个示例链接吗? – 2010-05-21 19:41:03