Определить, если 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" запускается, когда оно перестает играть.

поэтому решение

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

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


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


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

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