Обнаруживать, играет ли элемент HTML5 Video

Я просмотрел пару вопросов, чтобы узнать, играет ли элемент HTML5, но не может найти ответ. Я просмотрел документацию W3, и у меня есть событие с именем "play", но я не могу заставить его работать.

Это мой текущий код:

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

Ответы

Ответ 1

Примечание. Этот ответ был дан в 2011 году. Перед продолжением просмотрите обновленную документацию по видео HTML5.

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

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

Итак, решение

  • decalre одна переменная videoStatus
  • добавить обработчики событий для различных событий видео
  • обновить videoStatus с помощью обработчиков событий
  • используйте videoStatus, чтобы определить статус видео.

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

Ответ 2

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

Ответ 3

Мой ответ на Как узнать, есть ли <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
}

Ответ 4

jQuery(document).on('click', 'video', function(){
        if (this.paused) {
            this.play();
        } else {
            this.pause();
        }
});

Ответ 5

Добавьте 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>

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

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

Ответ 9

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

  }

}

Ответ 10

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

Я тестировал его, и он работает нормально.

Ответ 11

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

Ответ 12

Я просто сделал это очень просто, используя свойства onpause и onplay тега видео html. Создайте функцию 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, чтобы что-то делать, в зависимости от переменной состояния в этом случае videoPlaying.

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

Ответ 13

Я только что добавил это в медиа-объект вручную

let media = document.querySelector('.my-video');
media.isplaying = false;

...

if(media.isplaying) //do something

Тогда просто переключи его, когда я нажму кнопку воспроизведения или паузы.