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

【问题标题】：HTML, JS How to play/stop video on hoverHTML，JS 如何在悬停时播放/停止视频
【发布时间】：2017-11-19 20:43:27
【问题描述】：

如您所见，我对悬停时播放/停止视频有疑问。用户将鼠标悬停在视频上，它将开始播放，当他将鼠标移开时，视频将停止播放。有可能吗？怎么做？我这里有视频标签

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

【问题讨论】：

标签： javascript jquery html css video

【解决方案1】：

更新

为悬停在视频上时在控制台中引发的错误添加了修复程序（在 chrome 中测试）

Uncaught (in promise) DOMException: play() failed 因为用户没有先与文档交互。

将muted="muted" 属性添加到视频标签可解决此问题。详情见answer

给你

$(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="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>

【讨论】：

你的作品，但是方向相反。当我将鼠标移开时，它会播放视频
你想要反过来吗？
是的。我需要它在悬停时播放
谢谢！最后一个想法。我需要更改什么，以便我可以使此代码适用于同一网站页面上的每个视频，而不仅仅是一个？
你应该为所有video tags分配一个单独的class，并用class而不是id初始化它，这样你就可以initialize所有具有此功能的视频而不是分别添加所有 id。

【解决方案2】：

试试：

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

【讨论】：

【解决方案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(); 
}

【讨论】：

【解决方案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;
}

【讨论】：