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

感谢您的意见。

Answer 1

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

    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上效果很好，但是在其他浏览器上，里程可能会有所不同。

淡出HTML5视频海报图片oncanplaythrough

2 个答案: