I have video gallery written in ASP.NET. Each video has an .flv file hosted on FMS and image. I want to replace image with flash file each time use mouseover on video.
A:
I think this should work. Have your html structured so:
<div id="flashcontainer" class="video"> <!-- flashfile in here --></div>
<div id="imageoverlay" class="video overlay"> <img src="xyz.png" /> </div>
in css: .video{ position:absolute; top : 10px; left : 10px; display : none; }
.overlay{ display : block; }
in javascript.. catch the mouseover for imageoverlay and set the z-index display for imageoverlay to -1 block. then catch mouseout on the flashcontainer and set z-index back to 2none if you want...
Ravindra Sane
2010-10-14 08:52:40
If your flv autoplays and doesnt let the user control anything (no buttons), then it is much easier to control the opacity of the image
Ravindra Sane
2010-10-14 08:53:57
never knew you could set z-index of flash object... is that something new?
eugeneK
2010-10-14 08:57:55
hmm... hadnt tried the code so far.. but seems its a normal thing for flash to ignore whatever inherited z-index. Some hacks do exist (something about "wmode")but would be easiest to set display none/ display block... @eugeneK .. will edit the answer.
Ravindra Sane
2010-10-14 11:56:31
@Ravindra Sane, if i place flashcontainer in content means that i will load it as page loads. think of 50 videos loaded at once? How can i avoid it?
eugeneK
2010-10-14 12:09:16
OK.. now I understand the problem better. You can create a new swf object in the mouseover function handler for each individual image instead of pageload. Would there be a play button available to the user? If it is, I dont think that the buffering starts before user clicks play, or that you can stop it from doing so.
Ravindra Sane
2010-10-14 15:13:39
IE acting strange with that approach, it probably crushes or something i see blank screen for few moments after i hover over some image.
eugeneK
2010-10-15 07:45:05
I will post my answer in few days, now it is in debug mode. Lots of fixes, all done in jQuery at the end fighting it's bugs with dynamic embeding
eugeneK
2010-10-15 08:44:37
A:
Put them both in the same DIV. Inside the DIV, wrap the flash video object in another DIV. Depending on the mouse over events, make the image or the inner div visible.
If you don't get mouse over events when you leave the flash, add a mouse over handler for BODY or HTML and hide the flash when it is triggered.
Aaron Digulla
2010-10-14 08:54:11
@Aaron Digulla, i thought to load image to .swf file and handle it there but seems js can handle mouse events better.
eugeneK
2010-10-14 10:06:14
@Aaron Digulla, if i place flash in div means that i will load it as page loads. think of 50 videos loaded at once? How can i avoid it?
eugeneK
2010-10-14 12:09:41
Then create an empty div. When the page has finished loading, start loading the video players by adding them necessary code to the empty DIVs. If the user moves the mouse to one of them, start loading the player immediately.
Aaron Digulla
2010-10-15 11:49:55