當視頻暫停時顯示海報圖像。如何使它更平滑？

Question

檢查codepen，將鼠標懸停在視頻，然後unhover：https://codepen.io/simii/pen/ZyxKew

我基本上有一個背景圖像的視頻，因爲如果視頻的海報是不一樣的寬度和高度的視頻，它看起來不錯。

由於我想在視頻未播放時顯示圖像，我使用js重新加載視頻（以顯示透明海報以及背景圖像）。

但是，正如您所看到的，由於重新加載，視頻暫停時會「閃爍」。

任何人都有更好，更優雅的解決方案嗎？

<div class="row container"> 
    <div class="col-sm-3 video"> 
    <video id="video1" class="virgin" poster="https://imghost.io/images/2017/07/01/transparent.png" src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    </video> 
    </div> 

</div> 

Answer 1

有幾件事情你可以做。最簡單的方法是有兩個元素（一個海報元素和一個視頻元素），並在鼠標進入/離開時隱藏對方（如$('video').css('display','none')）等等。

您可以做的另一個選擇是hacky代碼 - 在激活任何懸停之前將視頻的大小更改爲0x0。

然而，執行此操作的最佳方法肯定是在col-sm-3視頻中添加一個元素，一個圖片和一個視頻，您在懸停時切換。