javascript - 淡入淡出 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 或任何阻止脚本播放的设备。在这些设备中，您只能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');
    });

});