Hi. Help me please. Need to create some thumbnails gallery on the page. its mean: i have different images on the page 160x120 , onmouseover - load player and start play, onmouseout hide the player and put back image and i need controlbar=none.
its work in firefox but not stable , but in IE its not work. Its like player loaded but movie not play. i see just black background.
i tested it on IE6, IE7, Firefox 3.5.2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="./css/blueprint/custom.css">
<title>JW Flash Player examples</title>
<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var place_holder = null;
var postGlobal = null;
var imgPathGlobal = null;
var flashFile = null;
function getThumbsVideo(idImg,flvFile,divHoderId,post){
if(place_holder!=null){hideThumbsVideo();}
var imgObj = document.getElementById(idImg);
var imgPath = imgObj.src;
place_holder = divHoderId;
postGlobal = post;
imgPathGlobal = imgPath;
flashFile = flvFile;
var flvObj = new SWFObject('player.swf','flvplayerId'+post,'160','120','9');
flvObj.addParam('allowscriptaccess','always');
flvObj.addParam('flashvars','&file='+flvFile+'&controlbar=none&duration=10&image='+imgPath+'&autostart=true&overstretch=fit&showicons=false');
flvObj.write(divHoderId);
}
function hideThumbsVideo(){
var divObj = document.getElementById(place_holder);
divObj.innerHTML = '<img src="'+imgPathGlobal+'">';
}
</script>
<STYLE>
#flvParentHolder{
height:140px;
width:180px;
display:block;
margin:10px,10px,10px,10px;
border:1px solid #00ff00;
}
.roloverFlv1{
position:relative;
width:160px;
height:120px;
z-index:1;
top:0px;
left:0px;
zoom:1;
}
.roloverFlv2{
position:relative;
width:160px;
height:120px;
z-index:2;
top:-120px;
left:0px;
zoom:1;
}
hr{color:#ff0000;}
</STYLE>
</head>
<body>
<div class="container">
</head><body>
<div id="page">
<div id="flvParentHolder">
<div id="divparent_1" class="roloverFlv1">
<img src="images/a.jpg" alt="video a.jpg">
</div>
<div id="divparent_01" class="roloverFlv2">
<img src="images/a.jpg" alt="video a.jpg" id="roller_1" onmouseover="getThumbsVideo('roller_1','a.flv','divparent_1','1')" onmouseout="hideThumbsVideo()">
</div>
</div>
<HR>
<div id="flvParentHolder">
<div id="divparent_2" class="roloverFlv1">
<img src="images/b.jpg" alt="video b.jpg">
</div>
<div id="divparent_02" class="roloverFlv2" >
<img src="images/b.jpg" alt="video b.jpg" id="roller_2" onmouseover="getThumbsVideo('roller_2','b.flv','divparent_2','2')" onmouseout="hideThumbsVideo()">
</div>
</div>
<HR>
<div id="flvParentHolder">
<div id="divparent_3" class="roloverFlv1" >
<img src="images/c.jpg" alt="video c.jpg">
</div>
<div id="divparent_03" class="roloverFlv2" >
<img src="images/c.jpg" alt="video c.jpg" id="roller_3" onmouseover="getThumbsVideo('roller_3','c.flv','divparent_3','3')" onmouseout="hideThumbsVideo()">
</div>
</div>
<HR>
</div>
</body>
</html>