http://jplayer.orgプラグインを使用してビデオをFlashとして再生しています。
ビデオが終了する数秒前に、ビデオの最終フレームに一致する背後のコンテンツをフェードアウトさせて、ビデオと静的コンテンツの間の移行がスムーズに見えるようにしようとしています。
これはChromeで非常にうまく機能しますが、IE9とFF17はビデオをまったくフェードしません。どちらも、終了するのを待ってから、すぐにビデオを非表示にします。
ビデオはdiv
画面全体に表示され、ビデオの再生が開始されると、背後にあるコンテンツがすでに読み込まれています。
約60%の継続時間でビデオを非表示にするための関連コードはtimeupdate
、jPlayerコンストラクターの場合です。
$(".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);
}
}
...
});
繰り返しになりますが、この効果はIEやFFだけでなく、Chromeでも非常にうまく機能します。また、アニメーション時間を変更しても効果はないようです。