鼠标悬停时停止播放（而不是暂停）HTML5 视频答案

【问题标题】：Stop playing ( not pause ) HTML5 video on mouseout鼠标悬停时停止播放（而不是暂停）HTML5 视频
【发布时间】：2019-02-02 10:19:19
【问题描述】：

有什么方法可以制作 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();
  });
})

demo 2 jsbin：https://jsbin.com/kivisutici/1/edit?html,css,js,output

【问题讨论】：

标签： javascript jquery html video

【解决方案1】：

删除视频src 属性并再次添加它应该可以工作。在mouseout 事件中试试这个：

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

【讨论】：

如果您可以将时间设置为 0 并达到完全相同的效果，为什么还要强制重新获取视频数据和不必要的带宽。

【解决方案2】：

你可以做两件事。

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

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

这会将玩家位置返回到 0 分 0 秒 - 就像您刷新了页面一样。

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

【讨论】：

我们可以使用.prop 而不是用.get jQuery 对象不必要地退出吗？或者你为什么不简单地使用this.currentTime？
有什么正确使用海报的例子吗？
嗨@RokoC.Buljan - 我使用.get 来镜像原始代码。我认为这是最简单的解释方式。

【解决方案3】：

你需要把mouseout改成这个

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

Demo

【讨论】：

你可以使用$(this).prop({currentTime:0, pause:true}) ?

【解决方案4】：

请尝试以下方法，让我知道它是否适合您。

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

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

or 

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

【讨论】：

currentTime 是 jQuery 方法吗？另外，为什么你使用鼠标悬停而不是鼠标离开？还有为什么要推荐这么糟糕的编码资源？
@RokoC.Buljan javascript 函数可以与 jQuery 函数结合使用。此外，我理解并感谢您指出 mouseover 不起作用，因为它应该是 mouseout 。最后，我提供了 w3school 的链接，因为他们有一个我认为与问题相关的工作示例。请随时分享您的想法。

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

没用的请忽略。

【讨论】：