淡入淡出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'); 
    }); 

});