检测 HTML5 Video 元素是否正在播放
[英]Detect if HTML5 Video element is playing
问题描述
我查看了几个问题以了解是否正在播放 HTML5 元素，但找不到答案。 我查看了 W3 文档，它有一个名为“播放”的事件，但我似乎无法让它工作。
这是我当前的代码：
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");
}
}
}
17 个解决方案
解决方案1
108 2012-10-09 21:16:16
在我看来，您可以只检查!stream.paused 。
解决方案2
34 2015-07-03 00:28:48
我在如何判断 <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
}
解决方案3
34 已采纳 2011-12-22 08:30:59
注意：这个答案是在 2011 年给出的。在继续之前，请检查 HTML5 视频的更新文档。
如果您只想知道视频是否暂停，请使用标志stream.paused 。
视频元素没有用于获取播放状态的属性。 但是有一个“播放”事件会在它开始播放时触发。 停止播放时触发事件“结束”。
所以解决办法是
- 声明一个变量videoStatus
- 为视频的不同事件添加事件处理程序
- 使用事件处理程序更新videoStatus
- 使用videoStatus来识别视频的状态
此页面将让您更好地了解视频事件。 播放此页面上的视频并查看事件是如何触发的。
http://www.w3.org/2010/05/video/mediaevents.html
解决方案4
19 2013-09-17 17:06:23
jQuery(document).on('click', 'video', function(){
if (this.paused) {
this.play();
} else {
this.pause();
}
});
解决方案5
14 2016-02-21 14:25:39
将事件侦听器添加到您的媒体元素。 可以触发的可能事件有： 音频和视频媒体事件
<!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>
解决方案6
8 2018-03-31 08:10:59
最佳方法：
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");
}
}
解决方案7
3 2012-05-09 21:47:00
我遇到过类似的问题，我无法事件侦听器添加到播放机，直到之后就已经开始玩，所以@二极管的方法不幸的是行不通的。 我的解决方案是检查玩家的“暂停”属性是否设置为 true。 这是有效的，因为即使在视频开始播放之前和结束之后，“暂停”也设置为 true，而不仅仅是在用户单击“暂停”时。
解决方案8
2 2013-10-28 21:12:41
以下是我们在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.";
};
}
解决方案9
1 2017-03-04 10:24:46
一个小例子
var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3') if (audio.paused) { audio.play() } else { audio.pause() }
解决方案10
1 2021-07-14 09:28:59
您可以使用“播放”事件侦听器 =>
const video = document.querySelector('#myVideo'); video.addEventListener("playing", function () { // Write Your Code });
解决方案11
0 2014-04-09 16:26:03
我刚刚查看了@tracevipin 添加的链接（ http://www.w3.org/2010/05/video/mediaevents.html ），我看到了一个名为“paused”的属性。
我已经测试过它，它工作得很好。
解决方案12
0 2014-12-14 12:28:50
这是我的代码 - 通过调用函数play()视频播放或暂停并更改按钮图像。
通过调用函数volume()音量被打开/关闭，按钮图像也会改变。
function play() {
var video = document.getElementById('slidevideo');
if (video.paused) {
video.play()
play_img.src = 'img/pause.png';
}
else {
video.pause()
play_img.src = 'img/play.png';
}
}
function volume() {
var video = document.getElementById('slidevideo');
var img = document.getElementById('volume_img');
if (video.volume > 0) {
video.volume = 0
volume_img.src = 'img/volume_off.png';
}
else {
video.volume = 1
volume_img.src = 'img/volume_on.png';
}
}
解决方案13
0 2017-09-19 19:52:09
我只是使用 html 视频标签的 onpause 和 onplay 属性非常简单地做到了。 创建一些 javascript 函数来切换全局变量，以便页面知道其他函数的视频状态。
下面的Javascript：
// onPause function
function videoPause() {
videoPlaying = 0;
}
// onPause function
function videoPlay() {
videoPlaying = 1;
}
Html 视频标签：
<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" >
<source src="video/myvideo.mp4" type="video/mp4">
</video>
在这种情况下，您可以使用 onclick javascript 根据状态变量执行某些操作。
希望这可以帮助...
解决方案14
0 2020-02-15 08:31:43
我的要求是点击视频并在播放时暂停或在暂停时播放。 这对我有用。
<video id="myVideo" #elem width="320" height="176" autoplay (click)="playIfPaused(elem)">
<source src="your source" type="video/mp4">
</video>
在app.component.ts里面
playIfPaused(file){
file.paused ? file.play(): file.pause();
}
解决方案15
0 2020-09-04 02:21:29
var video_switch = 0;
function play() {
var media = document.getElementById('video');
if (video_switch == 0)
{
media.play();
video_switch = 1;
}
else if (video_switch == 1)
{
media.pause();
video_switch = 0;
}
}
解决方案16
-1 2019-10-11 19:11:20
我只是手动将其添加到媒体对象中
let media = document.querySelector('.my-video');
media.isplaying = false;
...
if(media.isplaying) //do something
然后在我点击播放或暂停时切换它。
解决方案17
-1 2020-05-22 01:23:05
播放视频时的一个小例子
let v = document.getElementById('video-plan');
v.onplay = function() {
console.log('Start video')
};
检测HTML5视频是否正在播放或暂停，并相应地显示或隐藏Div
[英]Detect if HTML5 video is playing or paused and show or hide a Div accordingly
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.