Question

在我的网页上，我想使用.js放置视频。这部影片的背景图片带有播放按钮。当用户将其悬停时，将自动播放视频。当用户从视频中删除光标时，将加载视频。

我想在用户从视频中删除光标后立即显示背景图片。（视频仍在加载中）

你有什么主意吗？

这是代码：

<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://www.foldfactory.com/resources/sites/223_site/assets/video- 
thumb-star-iron-cross.mp4" type="video/mp4">Your browser does not 
support the video tag.</video>
  </div>
  <p>Passez votre curseur ;)</p>
</div>

<style type="text/css">
  #videosList {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: auto;
    display: block;
  }
  
  .video {
    background-image: url('https://image.noelshack.com/fichiers/2018/31/2/1533030900-star- 
 iron- cross.png');
 width: 480px;
    height: 270px;
    margin-bottom: 50px;
  }
  
  video::-webkit-media-controls {
    display: none !important;
  }
</style>
<script type="text/javascript">
  var figure = $(".video").hover(hoverVideo, hideVideo);

  function hoverVideo(e) {
    $('video', this).get(0).play();
  }

  function hideVideo(e) {
    $('video', this).get(0).load();
  }
</script>

亲切的问候。

Answer 1

您在寻找这样的东西吗？

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

#videosList {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: auto;
  display: block;
}

/*Add the background here*/
#videosList {
  background-image: url('https://picsum.photos/480/270');
  width: 480px;
  height: 270px;
  margin-bottom: 50px;
}

/*Hide the video container by default*/
#videosList .video {
  display: none;
  width: 480px;
  height: 270px;
}

/*Show the video container on hover*/
#videosList:hover .video {
  display: block;
}

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://code-love.tk/video/protest.mp4" type="video/mp4">Your browser does not support the video tag.</video>
  </div>
</div>
<p>Passez votre curseur ;)</p>

我的观点是：您可以通过使用CSS（display属性）获得所需的内容。

视频js在鼠标悬停时播放

1 个答案: