如何使用 jQuery 停止（而不是暂停）html5 视频

Question

我有一个使用 html5 视频标签播放视频短片的页面（完整视频不应该在此页面上可用）。如果用户访问该页面并返回，当他们第二次访问时（几分钟内），视频将不会播放。我相信这是因为我使用 jQuery 在 7 秒后暂停视频：

 $('#playButton').click(function(event){
$('#theVideo').get(0).play()
setTimeout(function(){$('#theVideo').get(0).pause() }, 7000);
});

我尝试使用 .stop() 按照这个问题的未接受答案中的建议： 让 HTML5 视频在指定时间停止

此代码不起作用：

 // doesn't work
setTimeout(function(){$('#theVideo').get(0).stop()  }, 7000);
// also doesn't work
setTimeout(function(){$('#theVideo').stop() }, 7000);

我参考了 Mozilla 的文档。我找到的关于 jQuery 和 HTML5 视频的唯一准官方文档来自 w3schools： https ://www.w3schools.com/tags/ref_av_dom.asp

它不引用“停止”方法。我应该期望 .stop() 工作，还是需要找到其他解决方案？

我的视频代码：

 <video playsinline id='theVideo' poster=''>
<source src='http://somedomain/subfolder/playlist.m3u8'>
</video>
<div id="playButton">PLAY</div>

我感谢您的帮助。

原文由 Jason 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

没有 .stop() 。你可以暂停它…

但您也可以将 currentTime 设置回零（文件开头）…

让它准备好在随后的 #playButton 单击时再次播放真是太好了。

那将是：

 $('#playButton').click(function(event){
  $('#theVideo').get(0).play();
  setTimeout(function(){
    $('#theVideo').get(0).pause();
    $('#theVideo').get(0).currentTime = 0;
  }, 7000);
});

现在， «如果用户访问该页面并返回» … Holà!!使用浏览器的后退按钮？你在这里无能为力。 JavaScript 不像 这里的正常页面加载那样运行。 “背面”不会发生任何事情。

原文由 Louys Patrice Bessette 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 pause 和 currentTime 停止它。

 var media = $("#video-id").get(0);
media.pause();
media.currentTime = 0;

检查一下： https ://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs

原文由 Jae Woo Woo 发布，翻译遵循 CC BY-SA 4.0 许可协议