更新

Question

使用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，淡入淡出似乎向后工作！它消失，消失，并再次消失。为什么？

Answer 1

您使用的是什么版本的jquery？

使用JQuery 1.8（带有chrome），在这个DEMO中，您可以看到您的代码有效！也许你的问题在其他地方..

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

更新

如果您的代码仍无法在chrome中运行，请尝试绑定另一个事件。

This是参加考试的好参考。

Answer 2

虽然浏览器之间不一致的原因对我来说并不清楚，但我能够重现它并通过添加父div和淡化div来解决它。

所以，html会是：

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

然后，JS将是：

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

html5的<video>在chrome </video>中没有淡出jquery

2 个答案:

更新