Best IT Recipes

Detect if an HTML5 Video element is playing

I looked through a couple of questions to find out if the HTML5 element is playing, but cannot find the answer. I have looked at the W3 documentation and I have an event called "play", but I cannot get it to work.

This is my current code:

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"); } } }
+63
javascript html html5 javascript-events dom-events html5-video video
Dec 22 '11 at 3:14
source share
11 answers

Note. This answer was given in 2011. Check out the updated HTML5 video documentation before continuing.

If you just want to know if the video is paused, use the stream.paused flag.

There is no property for a video item to obtain playback status. But there is one “game" event that will fire when it starts playing. The completed event is fired when it stops playing.

So the solution

  • decalre one variable videoStatus
  • add event handlers for various video events
  • update videoStatus with event handlers
  • use videoStatus to determine the status of the video.

This page will give you a better idea of ​​video events. Play the video on this page and see how events fire.
http://www.w3.org/2010/05/video/mediaevents.html

+24
Dec 22 '11 at 8:30
source share

It seems to me that you can just check !stream.paused .

+97
09 Oct '12 at 21:16
source share

My answer to How do I know if a <video> element is currently playing? :

MediaElement does not have a property that reports whether its game is or not. But you can define a custom property for it.

 Object.defineProperty(HTMLMediaElement.prototype, 'playing', { get: function(){ return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2); } })

Now you can use it on video or audio elements, for example:

 if(document.querySelector('video').playing){ // Do anything you want to }
+26
Jul 03 '15 at 0:28
source share
 jQuery(document).on('click', 'video', function(){ if (this.paused) { this.play(); } else { this.pause(); } });
+15
Sep 17 '13 at 17:06 on
source share

Add a list of events to your media item. Possible events that may be triggered: Audio and video multimedia 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>
+10
Feb 21 '16 at 14:25
source share

I had a similar problem when I could not add event listeners to the player until he started playing, so the @Diode method, unfortunately, will not work. My decision was to check if the property is set to “suspended” by the player true or not. This works because “paused” is set to true even before the video ever starts playing after it has ended, and not just when the user clicks “pause”.

+3
May 9 '12 at
source share

Here's what we use at http://www.develop.com/webcasts so people don’t accidentally leave the page while playing or pausing a video.

 $(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."; }; }
+2
Oct 28 '13 at 21:12
source share

a little example

 var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3') if (audio.paused) { audio.play() } else { audio.pause() }
+1
Mar 04 '17 at 10:24
source share

I just looked at the @tracevipin link ( http://www.w3.org/2010/05/video/mediaevents.html ) and I saw a property called "paused".

I tested it and it works fine.

0
Apr 09 '14 at 16:26
source share

This is my code - by calling the play() function, the video is playing or pausing, and the button image changes.

By calling the volume() function, 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 > 0) { video.volume = 0 volume_img.src = 'img/volume_off.png'; } else { video.volume = 1 volume_img.src = 'img/volume_on.png'; } }
0
Dec 14 '14 at 12:28
source share

I just made it very simple using the onpause and onplay properties of the html video tag. Create a javascript function to switch the global variable so that the page knows the video status for other functions.

Javascript below:

  // onPause function function videoPause() { videoPlaying = 0; } // onPause function function videoPlay() { videoPlaying = 1; }

Html video tag:

 <video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" > <source src="video/myvideo.mp4" type="video/mp4"> </video>

than you can use onclick javascript to do something, depending on the state variable in this case videoPlaying.

hope this helps ...

0
Sep 19 '17 at 19:52
source share


More articles:


All Articles