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();
  });
})

编辑：谢谢大家，根据您的回答，我通过将视频海报显示为第一帧来替代了此方法（谢谢Terence Eden的建议）。唯一的小问题是图像海报会在鼠标移开时闪烁。是否有更好的解决方案？

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 jsbin：https://jsbin.com/kivisutici/1/edit?html,css,js,output

Answer 1

删除视频src属性并再次添加即可。在mouseout事件中尝试以下操作：

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

Answer 2

请尝试以下操作，并让我知道它是否对您有用。

//链接到这里：https://www.w3schools.com/tags/av_prop_currenttime.asp

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

or 

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

Answer 3

您可以做两件事。

首先，将当前时间设置为0。

$(this).get(0).currentTime = 0;

这会将玩家位置恢复为0分钟0秒-就像您刷新了页面一样。

第二，您可以为视频设置poster。默认情况下，这是视频的第一帧-但您可以将其设置为所需的任何外部JPG。

Answer 4

您需要将mouseout更改为此

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

Demo

Answer 5

这是停止视频的示例代码，在HTML5中将鼠标悬停时使用暂停功能。

<script>
function testover(e)
{
//e.src="movie.mp4";
e.play();
}
function testout(ee)
{
ee.pause();
ee.currentTime =0;
//ee.src=null;
}
</script>
<video width="320" height="240" onmouseover="testover(this)" onmouseout="testout(this)" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

如果没有用，请忽略。

滑出鼠标时停止播放（不暂停）HTML5视频

5 个答案: