0

Javascript:

$("video").bind('ended', function(){
$("video").fadeOut(2000,function(){$("video").remove();});});​

HTML:

<video autobuffer controls autoplay>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

CSS:

video {
    width: 100%; 
    height: 100%;
      }

Firefox では、動画が終了するとフェードアウトします。Chrome では、コントロールのみがフェードし、ビデオは黒のままで、フェードが終了すると消えます。Chrome では機能しないのに Firefox では機能するのはなぜですか?(Firefox では同じビデオを試しましたが、.ogg 形式で試しました)

編集: ビデオの背景を #ffffff に変更すると、フェードが逆に動作するようです! 消えて、フェードインして、また消える。なぜ？</p>

4

2 に答える 2

0

jquery のどのバージョンを使用していますか?

JQuery 1.8 (クローム付き) を使用すると、このDEMOでコードが機能することがわかります。多分あなたの問題はどこかにある..

$("video").bind('ended', function(){
   console.log("video ended");
   $("video").fadeOut(2000,function(){
      $("video").remove();
   });
});​

アップデート

コードがまだ chrome で動作しない場合は、別のイベントをバインドしてみてください。

これは、テストを受けるための良い参考資料です。

于 2012-12-05T10:19:34.147 に答える