我必须在页面上有许多小缩略图,每个人点击时需要打开一个全尺寸(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. 弹出窗口并播放音频
- 4. 如何在Chrome中使用video.js播放flash(.flv)视频
- 5. 播放外部FLV视频
- 6. 弹出窗口中的JW播放器:播放器不弹出第二弹出窗口
- 7. 如何弹出jquery窗口播放vimeo/youtube视频?
- 8. 打开弹出窗口,同时播放HTML5视频
- 9. 不能让fancybox弹出窗口并播放我的YouTube视频
- 10. 如何在弹出窗口中播放YouTube视频?
- 11. 插件在弹出窗口中播放视频
- 12. Youtube视频播放器不关闭弹出窗口
- 13. 在Bootstrap模式弹出窗口中播放视频
- 14. 弹出窗口中的Youtube视频不会停止播放当窗口关闭
- 15. 在html5播放器上创建js弹出窗口
- 16. 如何查看Flash视频播放器(.flv文件)的代码?
- 17. 使用Flash'离线'播放视频
- 18. 使用Eval播放Flash视频。
- 19. 动态Flash FLV播放器
- 20. 多媒体Flash播放器弹出窗口
- 21. 在Flash播放器中播放视频
- 22. Flash视频慢/不播放
- 23. 获得Flash视频播放
- 24. 在ShadowBox中播放FLV视频
- 25. 高清FLV视频播放缓慢
- 26. 如何在android中播放.flv视频?
- 27. 在SWFobject中播放FLV视频
- 28. 在SWF对象中播放FLV视频
- 29. 在android中播放flv视频
- 30. 在mediaelement.js中播放FLV视频
你能发表一个示例链接吗? – 2010-05-21 19:41:03