Question

我正在制作一个画廊，并且有一些视频缩略图在悬停时播放，并且应该在鼠标移出时回到背景。看来一切正常，但是当我再次输入鼠标时，我遇到了使视频再次播放的问题。有小费吗？这是我正在使用的代码：

ToArgb()

Answer 1

请参考此代码

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
    $('video', this).get(0).play(); 
}

function hideVideo(e) {
    $('video', this).get(0).load(); 
}

#videosList {
 max-width: 600px; 
  overflow: hidden;
}

.video {
  background-image: url('https://img.youtube.com/vi/nZcejtAwxz4/maxresdefault.jpg');
  height: 330px;
  width: 600px;
  margin-bottom: 50px;
}

/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
    display:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="videosList">           

<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm">
    Your browser does not support the video tag.
    </video>
  </div>
  Hover mouse over video. Desktop only [ Obviously! ;) ]
</div>

Answer 2

我用旧的CSS悬浮鼠标做到了。问题已解决，效果很好。谢谢大家！

悬停播放视频，将鼠标隐藏在视频上不会重启并显示视频

2 个答案: