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 中测试）

未捕获（承诺中）DOMException：play() 失败，因为用户没有首先与文档交互。

muted="muted"向视频标签添加属性可以解决该问题。详细请看这个回答

干得好

$(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>