[英]fade HTML5 video image / poster in and out
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? 如果我们开始播放视频,然后淡出HTML5视频海报/ oimage,然后在暂停或停止播放视频时又将其淡入淡出,是否有可能?
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? 是否有现有的解决方案/脚本?
The behavior of the poster
attribute is really driven by the <video>
tag itself. poster
属性的行为实际上是由<video>
标签本身驱动的。 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>
You would then have to bind your events, for example with Zepto: 然后,您将不得不绑定事件,例如使用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: 也就是说 ,这可能是个坏主意,原因有两个:
play()
when inside a click event handler. play()
。 Since you're playing a second later, you don't really have control. Update 更新
Here's a different approach that would help you get around the iOS difficulties. 这是另一种可以帮助您解决iOS难题的方法。 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');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.