Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

play pause html5 video javascript

I have a function that plays a video when I click on the poster image displayed in the player and it seems to work :

var video = document.getElementById('player'); video.addEventListener('click',function(){     video().play(); },false); 

In the html5 video tag i have something like: id="player" onclick="this.play();"

the problem is if I press pause on the video controls it does in fact pause which is good but then if I press what is now the play button on the video controls I can see the button change to pause again for a split second then it goes back to being a play button again. So I press play and it only plays for a few frames and then goes back at being paused. The only way to make it play again is to click on the video viewing area.

How can I make it stop going back to pause when using the control bar play/pause button, and how can I make it pause when I click on the video viewing area?

I have tried the following but it doesn't work :

var video = document.getElementById('player'); video.addEventListener('click',function(){     if(video.paused){         video().play();     }else{         video.pause();     } },false); 

The reason I want to have the video play when pressing on the actual viewing area is it is too hard to locate the tiny controlbar play button on Android because it is so small, it would be easier for people to simply press the viewing area to get it going. In Firefox the video player plays when I click on the viewing area as well as pauses, which is exactly what I want to happen and it also does this without any javascript needed. In Android, the video just won't play at all when I press on the viewing area. So I am basically trying to force the Android browser to behave as Firefox does natively.

like image 321
Jizbo Jonez Avatar asked Apr 26 '12 05:04

Jizbo Jonez


People also ask

How do you pause a video in HTML and JavaScript?

pause() The HTMLMediaElement. pause() method will pause playback of the media, if the media is already in a paused state this method will have no effect.

How do you pause a video in HTML?

HTML Audio/Video DOM pause() Method The pause() method halts (pauses) the currently playing audio or video.

How do you stop a JavaScript video?

Stopping videos with JavaScript # Add this method to your script: var stopVideo = function ( element ) { var iframe = element. querySelector( 'iframe'); var video = element. querySelector( 'video' ); if ( iframe !==

How do you pause a video when another videos play button is clicked?

onplay = function() { vid2. pause(); };


1 Answers

$('#play-pause-button').click(function () {    var mediaVideo = $("#media-video").get(0);    if (mediaVideo.paused) {        mediaVideo.play();    } else {        mediaVideo.pause();   } }); 

I have done this in jQuery, which is simple and fast. To try it, you just need to use the ID of the video tag and your play/pause button.

EDIT: In vanilla JavaScript: a video is not a function, but part of DOM hence use

 video.play();  

Instead of

video().play() **wrong** 
like image 66
Sheelpriy Avatar answered Oct 02 '22 12:10

Sheelpriy