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

现在，"如果用户访问该页面并导航回来">...嗤嗤！！使用浏览器的后退按钮？你在这里无能为力。JavaScript在这里不像正常的页面加载那样运行。"背上"什么都不会发生。

Answer 2

您可以使用暂停和当前时间来停止它。

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

Answer 3

将 srcObject 设置为 null。

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.srcObject = null;
});
} 

Answer 4

window.location.reload(false(; 是你的朋友。 有了这个(从我在 https://levelup.gitconnected.com/data-stream-from-your-webcam-and-microphone-videochat-with-javascript-step-1-29895b70808b 上找到的内容中添加的额外按钮(当我单击停止按钮时，相机旁边的灯会熄灭，如果我随后单击开始，系统会再次提示我允许访问媒体设备。 扬子晚报.

(function () {
"use strict";
document.addEventListener('click', async event => {
if (event.target.id === 'start button') {
const stream = await window.navigator.mediaDevices.getUserMedia({ video: true, audio: true });
const video = document.getElementById('video');
video.srcObject = stream;
video.pause();
}
if (event.target.id === 'play button') {
video.play();
}
if (event.target.id === 'pause button') {
video.pause();
}
if (event.target.id === 'stop button') {
window.location.reload(false);
}
});
})();

Answer 5

//playdemo
function playdemo(){
video.src="url.mp4";
video.play();
}
//stopdemo
function stopdemo(){
video.src="";
}