Определить, если HTML5 Видео элемент играет
Я просмотрел пару вопросов, чтобы узнать, играет ли элемент 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");
}
}
}
13 ответов
Примечание : этот ответ был дан в 2011 году. Пожалуйста, проверьте обновленную документацию на HTML5 Видео, прежде чем продолжить.
Если вы просто хотите знать, приостановлено ли видео, используйте флаг stream.paused
.
для элемента video нет свойства для получения статуса воспроизведения. Но есть одно событие "Игра", которое будет инициировано, когда оно начнет играть. Событие "ended" запускается, когда оно перестает играть.
поэтому решение
- decalre одна переменная videoStatus
- добавить обработчики событий для различных событий видео
- обновление videoStatus использование обработчиков событий
- использовать videoStatus чтобы определить статус видео
эта страница даст вам лучшее представление о видео событий. Воспроизведение видео на этой странице и посмотреть, как события срабатывает.
http://www.w3.org/2010/05/video/mediaevents.html
мой ответ на как сказать, если элемент :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
}
jQuery(document).on('click', 'video', function(){
if (this.paused) {
this.play();
} else {
this.pause();
}
});
добавьте 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>
Я столкнулся с аналогичной проблемой, когда я не смог добавить прослушиватели событий в плеер до после он уже начал играть, поэтому метод @Diode, к сожалению, не будет работать. Моим решением было проверить, установлено ли свойство игрока "paused" в true или нет. Это работает, потому что "paused" имеет значение true еще до начала воспроизведения видео и после его окончания, а не только когда пользователь нажал "pause".
вот что мы используем в 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.";
};
}
Я просто посмотрел на ссылку @tracevipin добавил (http://www.w3.org/2010/05/video/mediaevents.html), и я увидел свойство с именем "paused".
я протестировал его, и он работает просто отлично.
Это мой код-путем вызова функции 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';
}
}
пример немного
var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
if (audio.paused) {
audio.play()
} else {
audio.pause()
}
Я просто сделал это очень просто, используя свойства onpause и onplay тега html video. Создайте функцию 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, чтобы сделать что-то в зависимости от переменной состояния в этом случае видеоплейинг.
надеюсь, что это помогает...
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");
}
}
A <video>
играет если element.paused === false
, при условии, что хливкий товес круговорота, но еще не начали gimbling еще, Зелюки, существует и несколько, но не все мимзи, и мюмзики между их outgribbing циклов, что означает, что они в настоящее время не outgribbing но сделали это по крайней мере один раз в прошлом.
https://www.w3.org/TR/2011/WD-html5-20110113/video.html#playing-the-media-resource