HTML，JS如何在悬停时播放/停止视频

Question

正如您所看到的，我有一个关于在悬停时播放/停止视频的问题。用户将鼠标悬停在视频上并开始播放，当他移动鼠标时，视频将停止播放。有可能吗？怎么样？我这里有视频标签

<video id="video" controls="" loop="" src="/wp-content/uploads/2016/06/vid/elipsiniai-treniruokliai.mp4" width="auto" height="auto" alt=""></video>

Answer 1

干得好

$(document).ready(function() {
  $(".myvideos").on("mouseover", function(event) {
    this.play();

  }).on('mouseout', function(event) {
    this.pause();

  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt=""></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt=""></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt=""></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt=""></video>

Answer 2

尝试：

$("#video").hover(
    ()=>{ $(this).get(0).play(); },
    ()=>{ $(this).get(0).pause(); }
);

Answer 3

为此你必须使用javascript。最简单的是使用jQuery / javascript实现的某种实现。

你也可以在互联网上轻松找到这个，只需在google上输入“悬停视频”我花了3秒钟：https://codepen.io/gil--/pen/bNxZWg

HTML：

<div id="videosList">           
<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
    </video>
  </div>
</div>

您需要在视频标记上观察悬停事件。

var figure = $(".video").hover( hoverVideo, hideVideo );

现在添加一个在悬停时播放视频的功能：

function hoverVideo(e) {  
  $('video', this).get(0).play(); 
}

当用户离开视频时，您添加了另一个功能：

function hideVideo(e) {
  $('video', this).get(0).pause(); 
}

Answer 4

要在悬停时制作视频播放/暂停，请尝试以下操作：

JS：

var figure = $(".video").hover(hoverVideo, hideVideo);

function hoverVideo(e) {
    $('video', this).get(0).play();
}

function hideVideo(e) {
    $('video', this).get(0).pause();
}

CSS：

video::-webkit-media-controls {
    display:none !important;
}