Detect if HTML5 Video element is playing

Question

I ve looked through a couple of questions to find out if an HTML5 element is playing  but can t find the answer  I ve looked at the W3 documentation and it has an event named  playing  but I can t seem to get it to work   This is my current code   var stream   document getElementsByTagName  video     function pauseStream       if  stream playing        for  var i   0  i  lt  stream length  i            stream i  pause             body  gt  header   addClass  paused note              paused note   text  Stream Paused              paused note   css  opacity    1

User · Answer

a bit example   x000D   x000D  var audio   new Audio  https   www soundhelix com examples mp3 SoundHelix-Song-1 mp3   x000D   x000D  if  audio paused    x000D    audio play   x000D    else   x000D    audio pause   x000D    x000D   x000D   x000D

User · Answer

jQuery document  on  click    video   function            if  this paused                this play              else               this pause

User · Answer

I just looked at the link  tracevipin added  http   www w3 org 2010 05 video mediaevents html   and I saw a property named  paused    I have ust tested it and it works just fine

User · Answer

I just did it very simply using onpause and onplay properties of the html video tag  Create some javascript function to toggle a global variable so that the page knows the status of the video for other functions    Javascript below         onPause function    function videoPause           videoPlaying   0              onPause function    function videoPlay           videoPlaying   1         Html video tag    lt video id  mainVideo  width  660  controls onplay  videoPlay     onpause  videoPause      gt                                lt source src  video myvideo mp4  type  video mp4  gt                                lt  video gt    than you can use onclick javascript to do something depending on the status variable in this case videoPlaying   hope this helps

User · Answer

I just added that to the media object manually  let media   document querySelector   my-video    media isplaying   false         if media isplaying    do something   Then just toggle it when i hit play or pause

User · Answer

I encountered a similar problem where I was not able to add event listeners to the player until after it had already started playing  so  Diode s method unfortunately would not work  My solution was check if the player s  paused  property was set to true or not  This works because  paused  is set to true even before the video ever starts playing and after it ends  not just when a user has clicked  pause

User · Answer

It seems to me like you could just check for  stream paused

User · Answer

Here is what we are using at http   www develop com webcasts to keep people from accidentally leaving the page while a video is playing or paused     document  ready function          var video      video webcast video        if  video length  lt   0            return             window onbeforeunload   function              var htmlVideo   video 0           if  htmlVideo currentTime  lt  0 01    htmlVideo ended                return null                     return  Leaving this page will stop your video

User · Answer

var video switch    0   function play          var media   document getElementById  video         if  video switch    0                media play            video switch   1            else if  video switch    1                media pause            video switch   0

User · Answer

This is my code - by calling the function play   the video plays or pauses and the button image is changed   By calling the function volume   the volume is turned on off and the button image also changes   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  gt  0        video volume   0     volume img src    img volume off png           else       video volume   1     volume img src    img volume on png

User · Answer

Best approach  function playPauseThisVideo this video id       var this video   document getElementById this video id      if  this video paused         console log  quot VIDEO IS PAUSED quot         else        console log  quot VIDEO IS PLAYING quot

User · Answer

Add eventlisteners to your media element  Possible events that can be triggered are  Audio and video media events   x000D   x000D   lt  DOCTYPE html gt   x000D   lt html gt   x000D   lt head gt    x000D   lt meta http-equiv  content-type  content  text html  charset UTF-8   gt   x000D   lt title gt Html5 media events lt  title gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt  head gt   x000D   lt body  gt  x000D       lt div id  output  gt  lt  div gt  x000D       lt video id  myVideo  width  320  height  176  controls autoplay gt  x000D           lt source src  http   www w3schools com tags mov bbb mp4  type  video mp4  gt  x000D           lt source src  http   www w3schools com tags mov bbb ogg  type  video ogg  gt  x000D       lt  video gt  x000D       lt script gt  x000D          var media   document getElementById  myVideo    x000D   x000D             Playing event x000D          media addEventListener  playing   function     x000D                  output   html  Playing event triggered    x000D              x000D      x000D             Pause event x000D          media addEventListener  pause   function      x000D                  output   html  Pause event triggered     x000D              x000D   x000D             Seeking event x000D          media addEventListener  seeking   function      x000D                  output   html  Seeking event triggered     x000D              x000D   x000D             Volume changed event x000D          media addEventListener  volumechange   function e     x000D                  output   html  Volumechange event triggered     x000D              x000D   x000D       lt  script gt     x000D   lt  body gt   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Note   This answer was given in 2011  Please check the updated documentation on HTML5 video before proceeding   If you just want to know whether the video is paused  use the flag stream paused   There is no property for video element for getting the playing status  But there is one event  playing  which will be triggered when it starts to play  Event  ended  is triggered when it stops playing   So the solution is    decalre one variable videoStatus add event handlers for different events of video update videoStatus using the event handlers use videoStatus to identify the status of the video   This page will give you a better idea about video events  Play the video on this page and see how events are triggered  http   www w3 org 2010 05 video mediaevents html

User · Answer

My answer at How to tell if a  lt video gt  element is currently playing   MediaElement does not have a property that tells about if its playing or not  But you could define a custom property for it   Object defineProperty HTMLMediaElement prototype   playing         get  function            return    this currentTime  gt  0  amp  amp   this paused  amp  amp   this ended  amp  amp  this readyState  gt  2              Now you can use it on video or audio elements like this   if document querySelector  video   playing          Do anything you want to

User · Answer

a bit example when playing video      let v   document getElementById  video-plan      v onplay   function           console log  Start video

User · Answer

My requirement was to click on the video and pause if it was playing or play if it was paused  This worked for me    lt video id  myVideo   elem width  320  height  176  autoplay  click   playIfPaused elem   gt     lt source src  your source  type  video mp4  gt   lt  video gt    inside app component ts  playIfPaused file       file paused   file play    file pause

[javascript] Detect if HTML5 Video element is playing

Examples related to javascript

Examples related to html

Examples related to video

Examples related to html5-video

Examples related to dom-events