Определить, воспроизводится ли элемент HTML5 Video - PullRequest
Новая
       28

Определить, воспроизводится ли элемент HTML5 Video

60 голосов
/ 22 декабря 2011

Я просмотрел пару вопросов, чтобы выяснить, играет ли элемент 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");
    }
  }
}

Ответы [ 12 ]

96 голосов
/ 10 октября 2012

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

23 голосов
/ 03 июля 2015

Мой ответ на Как узнать, воспроизводится ли в данный момент элемент ? :

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
}
20 голосов
/ 22 декабря 2011

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

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

Нет элемента видео для получения статуса воспроизведения.Но есть одно «играющее» событие, которое будет запущено, когда оно начнет играть.Событие «окончено» запускается, когда оно прекращает воспроизведение.

Таким образом, решение состоит из

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

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

14 голосов
/ 17 сентября 2013 
jQuery(document).on('click', 'video', function(){
        if (this.paused) {
            this.play();
        } else {
            this.pause();
        }
});
10 голосов
/ 21 февраля 2016

Добавьте 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>
3 голосов
/ 10 мая 2012

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

2 голосов
/ 29 октября 2013

Вот то, что мы используем в 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.";
    };
}
1 голос
/ 31 марта 2018 
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");

  }

}
1 голос
/ 04 марта 2017

битный пример 

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

if (audio.paused) {
  audio.play()
} else {
  audio.pause()
}
0 голосов
/ 19 сентября 2017

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

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

Страница:
...