如何在html5中縮放或模糊視頻海報？

我試圖創建一個視頻畫廊這樣的網站：
www.pmc.tv
我的網頁是：
www.mohsend.com/music-videos
如何在html5中縮放或模糊視頻海報？

但我不能給我的海報視頻的效果，例如當鼠標懸停或變模糊時縮放海報。

這是我的樣本視頻後：

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

來源

2015-05-17 mohsen dadsetan

不能對視頻應用效果。在您的參考網站中，他們已將該效果應用於其參考圖像。這是該網站的例子。

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

來源

2015-05-17 18:17:27

這與海報圖片沒什麼關係。他們正在使用CSS規則應用於使用懸停過渡的圖像。

可以將圖像封裝在div中，溢出設置爲隱藏。主圖像（或視頻元素，如果您喜歡的話）應用了變換。在懸停時，使用轉換參數應用不同的轉換以在它們之間生成動畫。

例

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

來源

2015-05-17 19:31:03 K3N

如何在html5中縮放或模糊視頻海報？

回答

相關問題