在 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 等，但没有找到解决此问题的方法。（我发现了这个：fade HTML5 video image / poster in and out 但它并没有解决问题）

感谢您的意见。

Answer 1

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

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

Fiddle

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

Codepen

In action on my site

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

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

Fading out the HTML5 video poster image oncanplaythrough

javascript

jquery

html5-video