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

Question

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

Answer 1

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

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

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

Так решение

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

Мой ответ на How to tell if a <video> element is currently playing?:

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 
} 

Answer 9

Добавить eventlisteners в медиа-элемента. Возможные события, которые могут быть вызваны, являются: Audio and video media events

<!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 
 
     var isPlaying = function(e) { 
 
      $("#output").html("Playing event triggered"); 
 
     }; 
 
     // Pause event 
 
     var onPause = function(e) { 
 
      $("#output").html("Pause event triggered"); 
 
     }; 
 
     // Volume changed event 
 
     var onVolumechange = function(e) { 
 
      $("#output").html("Volumechange event triggered"); 
 
     }; 
 
     // Seeking event 
 
     var onSeeking = function(e) { 
 
      $("#output").html("Seeking event triggered"); 
 
     }; 
 
     
 
     media.addEventListener("playing", isPlaying, false);  
 
     media.addEventListener("pause", onPause, false); 
 
     media.addEventListener("seeking", onSeeking, false); 
 
     media.addEventListener("volumechange", onVolumechange, false); 
 
    </script> 
 
</body> 
 
</html>

Answer 10

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

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

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

Answer 11

Я просто сделал это очень просто с помощью 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.

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