The concept is this, You place JS Code for a video in a div, then you have jQuery Code that executes when that div is clicked. I.E When you Play/Pause or whatever in the video the event should trigger. In my example I have delayed text showing up:
As Seen Here
If you run this is FF it works fine, if you run it in IE. or Chrome it does not trigger the click event.
This behavior is for any JS embeded video, regardless of YouTube, Vimeo, Amazon s3 ETC.
Is there something I am doing wrong or is there a work around (i.e. put an clear image or something over the whole Div, this is driving me crazy..)
Note: I have tried useing the MouseDown event instead of click and this does work, however it doesn't start my video on a single click :-/ (except again in FF, which works fine)
In case you don't like jsFiddle here is the JS Code:
$(function(){
$('.content').hide();
$('#delay-start').click(function(){
if($('.content').is(':hidden')){
$('.content').delay(1500).fadeIn(1000);
return false;
}
});
});
And HTML:
<div id='delay-start'>
<script type="text/javascript">
var playerhost = (("https:" == document.location.protocol) ? "https://market-review.s3.amazonaws.com/comprehensive-market-review-november11/ezs3js/secure/" : "http://market-review.s3.amazonaws.com/comprehensive-market-review-november11/ezs3js/player/");
document.write(unescape("%3Cscript src='" + playerhost + "flv/460089AC-DCB0-154F-0F5574AA57B9963A.js?t="+(Math.random() * 99999999)+"' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
<div class='content'>
<p>Welcome to my Hidden and Magical Text! Enjoy Your life</p>
</div>
This seems to be too big an issue for the brain trust of the internet! So I removed the click functionality and just set a delayed timer and auto play on the video. A solution that works in all browsers :-)