Javascript 检测 HTML5 Video 元素是否正在播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8599076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect if HTML5 Video element is playing
提问by Samuel Cole
I've looked through a couple of questions to find out if an HTML5 element is playing, but can't find the answer. I've looked at the W3 documentation and it has an event named "playing" but I can't seem to get it to work.
我查看了几个问题以了解是否正在播放 HTML5 元素，但找不到答案。我查看了 W3 文档，它有一个名为“播放”的事件，但我似乎无法让它工作。
This is my current code:
这是我当前的代码：
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");
}
}
}
采纳答案by Diode
Note : This answer was given in 2011. Please check the updated documentation on HTML5 video before proceeding.
注意：这个答案是在 2011 年给出的。在继续之前，请检查 HTML5 视频的更新文档。
If you just want to know whether the video is paused, use the flag stream.paused.
如果您只想知道视频是否暂停，请使用标志stream.paused。
There is no property for video element for getting the playing status. But there is one event "playing" which will be triggered when it starts to play. Event "ended" is triggered when it stops playing.
视频元素没有用于获取播放状态的属性。但是有一个“播放”事件会在它开始播放时触发。停止播放时触发事件“结束”。
So the solution is
所以解决办法是
- decalre one variable videoStatus
- add event handlers for different events of video
- update videoStatususing the event handlers
- use videoStatusto identify the status of the video
- 声明一个变量videoStatus
- 为视频的不同事件添加事件处理程序
- 使用事件处理程序更新videoStatus
- 使用videoStatus来识别视频的状态
This page will give you a better idea about video events. Play the video on this page and see how events are triggered.
http://www.w3.org/2010/05/video/mediaevents.html
此页面将让您更好地了解视频事件。播放此页面上的视频并查看事件是如何触发的。
http://www.w3.org/2010/05/video/mediaevents.html
回答by Samuel Cole
It seems to me like you could just check for !stream.paused.
在我看来，你可以只检查!stream.paused.
回答by Raees Iqbal
My answer at How to tell if a <video> element is currently playing?:MediaElementdoes not have a property that tells about if its playing or not. But you could define a custom property for it.
我在如何判断 <video> 元素当前是否正在播放中的回答？:MediaElement没有说明是否播放的属性。但是您可以为它定义一个自定义属性。
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function(){
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})
Now you can use it on videoor audioelements like this:
现在您可以在video或audio元素上使用它：
if(document.querySelector('video').playing){
// Do anything you want to
}
回答by geilt
jQuery(document).on('click', 'video', function(){
if (this.paused) {
this.play();
} else {
this.pause();
}
});
回答by Kurt Van den Branden
Add eventlisteners to your media element. Possible events that can be triggered are: Audio and video media events
将事件侦听器添加到您的媒体元素。可以触发的可能事件有：音频和视频媒体事件
<!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>回答by cjroth
I encountered a similar problem where I was not able to add event listeners to the player until afterit had already started playing, so @Diode's method unfortunately would not work. My solution was check if the player's "paused" property was set to true or not. This works because "paused" is set to true even before the video ever starts playing and after it ends, not just when a user has clicked "pause".
我遇到过类似的问题，我无法事件侦听器添加到播放机，直到之后就已经开始玩，所以@二极管的方法不幸的是行不通的。我的解决方案是检查玩家的“暂停”属性是否设置为 true。这是有效的，因为即使在视频开始播放之前和结束之后，“暂停”也设置为 true，而不仅仅是在用户单击“暂停”时。
回答by Dankyi Anno Kwaku
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");
}
}
回答by Michael Kennedy
Here is what we are using at http://www.develop.com/webcaststo keep people from accidentally leaving the page while a video is playing or paused.
以下是我们在http://www.develop.com/webcasts上使用的内容，以防止人们在视频播放或暂停时意外离开页面。
$(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.";
};
}
回答by Preschian
a bit example
一个小例子
var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
if (audio.paused) {
audio.play()
} else {
audio.pause()
}回答by JediSal
I just did it very simply using onpause and onplay properties of the html video tag. Create some javascript function to toggle a global variable so that the page knows the status of the video for other functions.
我只是使用 html 视频标签的 onpause 和 onplay 属性非常简单地做到了。创建一些 javascript 函数来切换全局变量，以便页面知道其他函数的视频状态。
Javascript below:
下面的Javascript：
// onPause function
function videoPause() {
videoPlaying = 0;
}
// onPause function
function videoPlay() {
videoPlaying = 1;
}
Html video tag:
Html 视频标签：
<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" >
<source src="video/myvideo.mp4" type="video/mp4">
</video>
than you can use onclick javascript to do something depending on the status variable in this case videoPlaying.
在这种情况下，您可以使用 onclick javascript 根据状态变量执行某些操作。
hope this helps...
希望这可以帮助...
