javascript - 在canplaythrough 上淡出 HTML5 视频海报图像

Question

我正在尝试为 HTML5 视频元素的海报属性设置动画。有人知道如何使用 jQuery 定位海报属性吗？我想要的是让海报 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 上运行得很好，但在其他浏览器上效果可能会有所不同。