Question

如果我们启动视频并在暂停或停止视频时再次淡入视频，是否可以淡出HTML5视频海报/图像？

通常情况下，海报图片会在视频启动时直接隐藏，并在我们加载视频时直接显示/停止播放

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

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

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

同样地，你会听到暂停事件以及何时发生淡入淡出。

那说，这可能是一个坏主意，原因有两个：

这可能不适用于iOS或任何阻止脚本播放的设备。在这些设备中，只能在单击事件处理程序内触发play()。因为你以后玩了一秒钟，你实际上没有控制权。
您正在破坏默认功能。当我暂停视频时，我可能想要寻找另一个时刻，但我绝对想知道我在哪里停下来。缺乏可视化队列就会消失。

<强>更新

这是一种不同的方法，可以帮助您解决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');
    });

});

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

1 个答案: