javascript - html5的不会在 chrome 中使用 jquery 淡出

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

Answer 1

你用的是什么版本的jquery？

使用 JQuery 1.8 (with chrome)，在这个DEMO中你可以看到你的代码工作正常！也许你的问题在其他地方..

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

更新

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

这是参加考试的一个很好的参考。

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();
    });
});​