64 html javascript video html5-video dom-events
我已经查看了几个问题,以确定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");
}
}
}
Sam*_*ole 97
在我看来,你可以检查一下!stream.paused.
Rae*_*bal 26
我的回答是如何判断<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
}
Dio*_*ode 25
注意:此答案于2011年提供.请在继续之前查看有关HTML5视频的更新文档.
如果您只想知道视频是否已暂停,请使用该标志stream.paused.
获取播放状态的视频元素没有属性.但是有一个"玩"的事件会在它开始播放时被触发.当游戏停止播放时会触发"已结束"事件.
所以解决方案是
此页面可让您更好地了解视频事件.在此页面上播放视频,了解如何触发事件.
http://www.w3.org/2010/05/video/mediaevents.html
gei*_*ilt 15
jQuery(document).on('click', 'video', function(){
if (this.paused) {
this.play();
} else {
this.pause();
}
});
Kur*_*den 10
将eventlisteners添加到您的媒体元素.可触发的可能事件包括:音频和视频媒体事件
<!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");
}
}