淡出 HTML5 视频海报图像 oncanplaythrough

Question

我正在尝试为 HTML5 视频元素的海报属性设置动画。任何人都知道如何使用 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，但没有找到解决此问题的方法。 （我发现了这个：fade HTML5 video image / poster in and out 但它并没有解决问题）

感谢您的意见。

Answer 1

这是我如何淡出海报，或者更准确地说是淡入视频。

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

Codepen

In action on my site

这在 chrome 上运行良好，但在其他浏览器上运行里程可能会有所不同。

Answer 2

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

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

Fiddle