Question

I’m using the http://jplayer.org plugin to play a video as Flash.

A few seconds before the video ends, I am trying to make it fade out reveal the content behind it which matches the final frames of the video, so the transition between video and static content appears smooth.

This works quite well in Chrome, however IE9 & FF17 do not fade the video at all. They both simply wait for it to end and then hide the video instantly.

The video is on a div that fills the entire screen and the content behind is already loaded when the video starts playing.

The relevant code for hiding the video at ~60% duration is in the timeupdate event of the jPlayer constructor.

$(".landing-video").jPlayer({
    ...
    timeupdate: function (e) {
       var progress = e.jPlayer.status.currentTime / e.jPlayer.status.duration;
       if (progress > 0.6 && isVideoPlaying) {
          isVideoPlaying = false;
          $(".landing").hide("fade", 3500);         
       }
    }
    ...
});

Again to reiterate, the effect works quite well on Chrome, just not IE and FF. Also changing the animate time does not appear to have any effect.

Answer 1

One problem I can see is the jquery hide function does not take "fade" as a parameter.

Instead of using hide:

$(".landing").hide("fade", 3500);

You want to use fadeOut:

$(".landing").fadeOut(3500);

I’m surprised this is working in Chrome.

Other than that, ensure you have the wmode param set to opaque:

<param name="wmode" value="opaque">