淡入和淡出HTML5视频图像/海报

Question

如果我们开始播放视频，然后淡出HTML5视频海报/ oimage，然后在暂停或停止播放视频时又将其淡入淡出，是否有可能？

通常，在视频开始播放时，海报图像会直接隐藏，而在加载/停止视频播放时，海报图像也会直接显示

也许我们可以将海报图像克隆到画布上，将其放置在视频上，然后淡入和淡出？

是否有现有的解决方案/脚本？

Answer 1

poster属性的行为实际上是由<video>标签本身驱动的。 您只是在告诉它，然后才开始显示此图像。 像任何视频元素定制一样，这将需要您包含自己的元素。 基本上，您将拥有：

<div class="video-container" style="position:relative">
    <video width="x" height="y"></video>
    <img style="position: absolute; top: 0; left: 0; bottom: 0; right: 0">
</div>

然后，您将不得不绑定事件，例如使用Zepto：

$('.video-container img').bind('click', function() {
    var $img = $(this),
        $vid = $img.parent().find('video');
    $img.animate({opacity: 0}, 1000, 'linear', function() {
        $img.css({visibility: 'hidden'});
        $vid[0].play();
    });
});

同样，您将监听暂停事件，并在事件发生时淡出。

也就是说 ，这可能是个坏主意，原因有两个：

1. 这可能不适用于iOS或任何阻止脚本播放的设备。 在这些设备中，您只能在click事件处理程序内部时触发play() 。 由于稍后再玩，因此您实际上没有控制权。
2. 您正在破坏默认功能。 当我暂停视频时，我可能想寻求另一个机会，但我绝对想知道我从哪里离开。 视觉队列的缺乏消除了这种情况。

更新

这是另一种可以帮助您解决iOS难题的方法。 在这种情况下，您实际上是在点击时开始播放视频，这意味着在一段时间内淡出的图像会覆盖正在播放的视频，因此这就是您的通话。

$('.video-container').each(function() {
    var $img = $(this).find('img'),
        $vid = $(this).find('vid');

    $img.bind('click', function() { $vid[0].play() });

    $vid.bind('play', function() {
        $img.animate({opacity: 0}, 1000, 'linear', function() {
            if($vid[0].playing) {
                $img.css({visibility: 'hidden'});
            }
        });
    });

    $vid.bind('pause ended', function() {
        $img.css({visibility: 'visible'});
        $img.animate({opacity: 1}, 1000, 'linear');
    });

});