我查看了几个问题，想知道HTML5元素是否正在播放，但找不到答案。我查看了W3文档，其中有一个名为“playing”的事件，但似乎无法使用。
这是我的当前代码：
var stream = document.getElementsByTagName('video');
function pauseStream() {
if (stream.playing) {
for (var i = 0; i < stream.length; i++) {
stream[i].pause();
$("body > header").addClass("paused_note");
$(".paused_note").text("Stream Paused");
$('.paused_note').css("opacity", "1");
}
}
}
在我看来，你只需要检查！stream.paused即可。
!video.paused 或者 video.paused === false 并不一定意味着视频正在播放 - 它只告诉你 "video.play() 已经触发，但是视频仍然可以在加载或播放中"。为了检测它是否正在播放，使用 video.onplaying 事件来检测它是否已经加载并且正在播放，例如：video.onplaying = function() { console.log('视频现在已经加载并正在播放'); }。这个区别对于你的需求可能重要，也可能不重要。 - Jasdeep Khalsa请查看我在如何判断 <video> 元素当前是否正在播放？的答案：
MediaElement没有指示它是否正在播放的属性。但是，您可以为其定义自定义属性。
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function(){
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})
现在您可以像这样在video或audio元素中使用它：
if(document.querySelector('video').playing){
// Do anything you want to
}
注意：此回答发布于2011年，请在进行操作前查看有关HTML5视频的更新文档。
如果您只想知道视频是否已暂停，请使用标志stream.paused。
视频元素没有获取其播放状态的属性。但是有一个事件"playing"，当它开始播放时会触发。还有一个名为"ended"的事件在停止播放时也将被触发。
因此解决方案如下：
此页面将让您更好地了解视频事件。在此页面上播放视频并查看事件如何被触发。
http://www.w3.org/2010/05/video/mediaevents.html
jQuery(document).on('click', 'video', function(){
if (this.paused) {
this.play();
} else {
this.pause();
}
});
为您的媒体元素添加事件监听器。可能触发的事件包括：音频和视频媒体事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Html5 media events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body >
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls autoplay>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
</video>
<script>
var media = document.getElementById('myVideo');
// Playing event
media.addEventListener("playing", function() {
$("#output").html("Playing event triggered");
});
// Pause event
media.addEventListener("pause", function() {
$("#output").html("Pause event triggered");
});
// Seeking event
media.addEventListener("seeking", function() {
$("#output").html("Seeking event triggered");
});
// Volume changed event
media.addEventListener("volumechange", function(e) {
$("#output").html("Volumechange event triggered");
});
</script>
</body>
</html>最佳方法：
function playPauseThisVideo(this_video_id) {
var this_video = document.getElementById(this_video_id);
if (this_video.paused) {
console.log("VIDEO IS PAUSED");
} else {
console.log("VIDEO IS PLAYING");
}
}
我曾遇到类似的问题，即在播放器开始播放之前无法添加事件监听器，因此@Diode的方法不起作用。我的解决方案是检查播放器的“paused”属性是否设置为true。这个方法是可行的，因为“paused”在视频开始播放之前甚至结束后都被设置为true，而不仅仅是当用户点击“暂停”时。
您可以使用“playing”事件监听器 =>
const video = document.querySelector('#myVideo');
video.addEventListener("playing", function () {
// Write Your Code
});$(document).ready(function() {
var video = $("video#webcast_video");
if (video.length <= 0) {
return;
}
window.onbeforeunload = function () {
var htmlVideo = video[0];
if (htmlVideo.currentTime < 0.01 || htmlVideo.ended) {
return null;
}
return "Leaving this page will stop your video.";
};
}
一个例子
var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
if (audio.paused) {
audio.play()
} else {
audio.pause()
}