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

问题描述

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

Is it possible to fade out the HTML5 video poster / oimage if we start the video and fade it in again when we pause or stop the video?

通常情况下海报图片在视频开始时直接隐藏，并在我们加载视频时直接显示/停止它

Normally the poster image is directly hidden when the video is started and also directly shown when we load the video / stop it

也许我们可以将海报图像克隆到画布上，定位它通过视频并将其淡出并输入？

Maybe we can clone the poster image to a canvas, position it over the video and fade it out and in?

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

Is there an existing solution / script?

推荐答案

海报属性的行为实际上是由< video> 标记驱动的本身。在开始显示此图像之前，您只是告诉它。与任何视频元素定制一样，这需要您拥有自己的元素。基本上，你会有：

The behavior of the poster attribute is really driven by the <video> tag itself. You're just telling it, before starting display this image. Like any video element customization, this would require you to have your own elements involved. Basically, you would have:

<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：

You would then have to bind your events, for example with 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();
    });
});

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

Similarly, you would listen for the pause event and when it occurs fade back in.

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

That said, this is probably a bad idea for two reasons:

1. 这可能不适用于iOS或任何阻止脚本播放的设备。在这些设备中，只能在单击事件处理程序中触发 play（）。由于你玩了一秒钟，你实际上没有控制权。


2. 你打破了默认功能。当我暂停视频时，我可能想要寻找另一个时刻，但我绝对想知道我在哪里停下来。缺少可视化队列就会消失。

1. This probably won't work for iOS or any device that prevents scripted playback. In these devices, you can only trigger play() when inside a click event handler. Since you're playing a second later, you don't really have control.
2. You're breaking default functionality. When I pause a video, I may want to seek to another moment but I definitely want to know where I left off. The lack of a visual queue takes that away.

更新

这是一种不同的方法，可以帮助您解决iOS难题。在这种情况下，您实际上是在点击时启动视频，这意味着将有一段时间，淡入淡出的图像覆盖播放视频，因此这是您的通话。

Here's a different approach that would help you get around the iOS difficulties. In this case, you actually start the video on click, meaning there will be a period of time where the fading image covers the playing video, so it's your call.

$('.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视频图像/海报的淡入和淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！