var flvP;
function myInit() { /* called by body onload */
var isIE = navigator.appName.indexOf("Microsoft") != -1;
flvP = (isIE) ? window['flvPlayer'] : document['flvPlayer'];
}
function playVideo(vid) {
$('#video').removeClass('hidden');
flvP.flvPlay(vid);
}
function stopVideo() {
$('#video').addClass('hidden');
flvP.flvStop();
}
</script>
<body onload="myInit();">
.
.
<img id="Pic1" src="media/pic1.jpg" onmouseover="playVideo('video1.flv');" onmouseout="stopVideo(); "/>
<img id="Pic2" src="media/pic2.jpg" onmouseover="playVideo('video2.flv');" onmouseout="stopVideo(); "/>
</body>
I'd like to do this with jQuery, by binding the mouseover action of each image to the playVideo function, passing the appropriate video to the playVideo function. But it's not clear that the bind structure allows parameters to be handled.
Clearly I'm new to jQuery and it would be instructive if someone could sketch out the proper way to do this with jQuery.
Thanks for any help.