【问题标题】：html5's <video> not fading out with jquery in chromehtml5 的 <video> 不会在 chrome 中使用 jquery 淡出
【发布时间】：2017-04-08 10:07:28
【问题描述】：

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

【问题讨论】：

您是否考虑过不同的方法？就像在顶部淡入一层，然后将其与视频一起移除？
这不适用于我的网站。
我说的不是整个网站的覆盖，只是视频元素。这几乎适用于任何网站......只需让您的叠加层与您正在淡入的背景具有相同的样式。
但是我想让用户看到视频下面的东西，它不会隐藏内容吗？（还是我误解了你？）

标签： javascript jquery html html5-video

【解决方案1】：

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

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

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

更新

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

This 是参加考试的好参考。

【讨论】：

奇怪，你的例子对我不起作用，它只会在 2 秒后消失。使用 ubuntu chrome 版本 23.0.1271.64
绑定有效，它在延迟时间后消失并触发事件。问题在于淡入淡出的动画，它不会淡出，只是消失

【解决方案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();
    });
});

【讨论】：

糟糕。刚刚意识到这个问题有多老了。