Определить, если 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 56
javascript html5 video javascript-events html5-video

13 ответов:

Примечание : этот ответ был дан в 2011 году. Пожалуйста, проверьте обновленную документацию по HTML5 Видео, прежде чем продолжить.

Если вы просто хотите знать, приостановлено ли видео, используйте флаг stream.paused.

нет свойства для элемента video для получения статуса воспроизведения. Но есть одно событие "Игра", которое будет вызвано, когда он начинает играть. Событие "закончено" срабатывает, когда он перестает играть.

Так что решение есть

  1. decalre одной переменной videoStatus
  2. добавить обработчики событий для различных событий видео
  3. обновление videoStatus использование обработчиков событий
  4. использовать videoStatus чтобы определить статус видео

эта страница даст вам лучшее представление о видео событий. Воспроизведение видео на этой странице и посмотреть, как события срабатывает.
http://www.w3.org/2010/05/video/mediaevents.html

16

Мне кажется, вы могли бы просто проверить для !stream.paused.

94

мой ответ на как узнать, если элемент :

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
}
21
jQuery(document).on('click', 'video', function(){
        if (this.paused) {
            this.play();
        } else {
            this.pause();
        }
});
13

добавить 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>
8

Я столкнулся с аналогичной проблемой, когда я не смог добавить прослушиватели событий в плеер до после он уже начал играть, поэтому метод @Diode, к сожалению, не будет работать. Мое решение состояло в том, чтобы проверить, установлено ли свойство игрока "paused" в true или нет. Это работает, потому что "paused" установлен в true еще до начала воспроизведения видео и после его окончания, а не только тогда, когда пользователь нажал "pause".

3

вот что мы используем в 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.";
    };
}
2

Я просто посмотрел на ссылку @tracevipin добавил (http://www.w3.org/2010/05/video/mediaevents.html), и я увидел свойство с именем "paused".

Я ust протестировал его, и он работает просто отлично.

0

Это мой код-путем вызова функции 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';
  }
}
0

пример немного

var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')

if (audio.paused) {
  audio.play()
} else {
  audio.pause()
}
0

Я просто сделал это очень просто, используя свойства 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, чтобы сделать что-то в зависимости от переменной состояния в этом случае видеоплеер.

надеюсь, что это помогает...

0
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");

  }

}
0

A <video> играет если element.paused === false, при условии, что slithy toves вращаются, но еще не начали gimbling, borogoves существуют и несколько, но не все Мимси, а mome raths находятся между их циклами перекачки, что означает, что они в настоящее время не перекачивают, но сделали это по крайней мере один раз в прошлом.

https://www.w3.org/TR/2011/WD-html5-20110113/video.html#playing-the-media-resource

0