淡出HTML5视频海报图像oncanplaythrough

Question

我正在尝试制作HTML5视频元素的poster属性的动画。 任何人都知道如何使用jQuery定位发帖人attr？ 我想要做的是在视频开始播放时使海报img逐渐淡出，以避免当前出现的跳动。 这是代码...

HTML：

<video id="vid preload="auto" loop="loop" poster="images/firstFrame.png">
  <source src="video/bg.mp4" type="video/mp4" />
  <source src="video/bg.webm" type="video/webm" />
</video>

JS：

$(document).ready(function() {
  var vid = document.getElementById("vid");

  vid.oncanplaythrough = function() { 
    $('POSTER???').animate({'opacity': '0'});
    vid.oncanplay = vid.play();
  }
});

我搜索过Google和SO，但没有找到解决此问题的解决方案。 （我发现： 淡入淡出HTML5视频图像/海报，但不能解决问题）

感谢您的输入。

Answer 1

在jquery中使用属性选择器。但是如果淡出意味着完整的视频被隐藏，我们就不能淡出海报，因为它是视频的一部分。 这样我们就可以从视频中删除海报。

    vid.oncanplaythrough = function() { 
        var $this = $(this);
        $this.attr('poster' , '').fadeOut('fast');
        $this.fadeIn('fast');
      vid.oncanplay = vid.play();
  }

小提琴

Answer 2

这是我淡出海报的方式，或更确切地说是淡入视频的方式。

HTML：

<div id="container">
  <video id='video' controls="controls" muted="muted" autoplay="true" preload='none'>
    <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'/>
    <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
    <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'/>
    <p>Your user agent does not support the HTML5 Video element.</p>
  </video>
</div>

CSS：

/* replaces the "cover" image in html5 video */
#container {
  width: 100vw;
  height: auto;
  background-image: url("https://i.ytimg.com/vi/aqz-KE-bpKQ/maxresdefault.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
}

#video {
  width: 100%;
  height: auto;
  opacity: 0;                /* start faded out */ 
  transition: opacity 2s;    /* css fade in */
}

jQuery的：

/* wait for all elements of DOM to be rendered */
$(document).ready(function() {

    /* force some of these attr */
    $("#video").attr({"autoplay": true,
                            "muted": true});

    /* double ensure that video is muted otherwise chrome
          won't autostart */
    $("#video").prop('muted', true);

    /* when video auto plays, it fades in */
    $("#video").bind('play', function (e) {
      $("#video").css('opacity', 1.0);
    });
});

码笔

在我的网站上发挥作用

这在chrome上效果很好，但是在其他浏览器上，里程可能会有所不同。