如何使用 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>

我感谢您的帮助。

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不像这里的正常页面加载那样运行。“在后面”什么都不会发生。

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