如何在html5中缩放或模糊视频海报？
如何在html5中缩放或模糊视频海报？
提问于 2015-05-17 22:51:25
我正在尝试创建一个视频画廊，就像这个网站：
我的网页是：
但我不能给我的海报视频一个效果，例如当鼠标悬停时缩放海报或模糊它。
这是我的示例视频帖子：
<table>
<td>
<video controls="controls" width="540" height="306" preload="none" poster="http://mohsend.com/images/poster/adib.jpg">
<source src="example.mp4" type="video/mp4" />
</video>
<h6 class="highlightColor">ADIB TAOOSI</h6><h6>''Xoshawistm''<br>director: Mohsen Dadsetan<br>COMING SOON...</h6>
</td>
<td>
<video controls="controls" width="540" height="306" preload="none" poster="http://mohsend.com/images/poster/sohafarhad.jpg">
<source src="example.mp4" type="video/mp4" />
</video>
<h6 class="highlightColor">SOHA & SARO FT FARHAD MANSORI</h6><h6>''Era Kurdistana''<br>director: Mohsen Dadsetan<br>2015</h6>
</td>
</table>
回答 3
Stack Overflow用户
发布于 2015-05-18 02:17:27
您无法对视频应用特效。在您的参考网站中，他们已经将该效果应用于其参考图像。这是来自该网站的示例。
<img width="480"
height="295"
src="http://pmc.tv/wp-content/uploads/2015/04/Saed-Deylami-Sakhte.mp41-480x295.jpg"
class="attachment-folio-thumb2 wp-post-image" alt="Saed Deylami - Sakhte.mp4">Stack Overflow用户
发布于 2015-05-18 03:31:04
这与海报图像没有太多关系。他们使用的是一个应用CSS规则的图像，使用悬停时的过渡。
可以将图像包装在div中，并将overflow设置为隐藏。主图像(如果您愿意，也可以是视频元素)应用了变换。悬停时，将使用过渡参数应用不同的变换，以便在它们之间设置动画。
示例
.wrapper {
width:480px;
height:295px;
overflow:hidden
}
.demo {
transform:rotate(0deg) scale(1);
transition: 0.5s transform;
}
.demo:hover {
transform:rotate(10deg) scale(1.3);
transition: 0.5s transform;
}<div class="wrapper">
<img class="demo" width="480" height="295" src="http://i.stack.imgur.com/Xu6TL.jpg">
</div>
Stack Overflow用户
发布于 2018-07-02 04:09:38
您可以使用以下样式模糊视频海报：
.blur {
-webkit-filter: blur(125px);
-moz-filter: blur(125px);
-o-filter: blur(125px);
-ms-filter: blur(125px);
filter: blur(125px);
}visible here就是一个例子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30288141
复制相关文章
相似问题