停止播放（不会暂停）鼠标移开时HTML5视频

Question

有什么办法可以使HTML5视频完全停止鼠标移开时的视频？通过停止我的意思是重置视频状态，就像刷新页面。所有我能得到正对鼠标移开时暂停视频，但是这不是我想要的。谢谢。

jsbin：https://jsbin.com/fenixinuku/edit?html,css,js,output

HTML：

<video class="myvideo" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt=""></video>

JS：

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

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

编辑：谢谢你们，根据您的回答我通过显示视频海报作为第一帧对此做出的选择（感谢您特伦斯伊甸园建议）。唯一的小问题是，像海报上mouseout..Any更好的解决办法闪烁？

HTML：

   <video class="myvideo" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" poster="https://www.w3schools.com/images/w3html5.gif"></video>

JS：

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

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

但2个JS瓶：四联zxsw POI

Answer 1

卸下视频https://jsbin.com/kivisutici/1/edit?html,css,js,output属性，然后再加入它应该工作。试试这个的src事件中：

mouseout

Answer 2

你可以做两件事情。

首先，设置当前时间

var video = $(this).get(0);
var source = video.src;
video.src = "";
video.src = source;

。

0

返回球员位置为0分钟0秒 - 就像您刷新页面。

其次，你可以设置视频$(this).get(0).currentTime = 0; 。默认情况下，这是视频的第一帧 - 但你可以将其设置为你想要的任何外部JPG。

Answer 3

您需要poster改变你这个

mouseout

.on('mouseout', function(event) {
    $(this).get(0).currentTime = 0
    $(this).get(0).pause();
  });

Answer 4

请尝试以下，让我知道，如果它为你工作。 //链接在这里：Demo

https://www.w3schools.com/tags/av_prop_currenttime.asp

Answer 5

这是停止视频的样本代码，用于在HTML5小鼠出暂停功能。

$(".myvideo"). mouseout(function() {
    $(this).get(0).currentTime = 0;
});

or 

$(".myvideo"). mouseout(function() {
    $(this).currentTime = 0;
});

请忽略，如果它是没有用的。