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

Question

檢查代碼筆，將鼠標懸停在視頻上，然后將鼠標懸停： 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

您可以做幾件事。 最簡單的方法是具有兩個元素（海報元素和視頻元素），並在鼠標的Enter / leave（例如$('video').css('display','none') ）中彼此隱藏，依此類推。

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

但是，實現此目的的最佳方法肯定是必須在col-sm-3視頻中包含一個元素，一個圖片和一個視頻，您可以在懸停時切換這些元素。