javascript - 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

更新

修复了将鼠标悬停在视频上时控制台中抛出的错误(已在 chrome 中测试)

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

将 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>