play pause html5 video javascript

Question

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.

please go through this link http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery — Vicky, Apr 26 '12 at 06:43
I went through it and there is nothing there to help with this problem — Jizbo Jonez, Apr 26 '12 at 20:01

score 55 · Accepted Answer · edited Oct 17 '18 at 23:12

55

$('#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**

edited Oct 17 '18 at 23:12

jordiburgos

5,964
4
46
80

answered Jan 09 '14 at 07:21

Sheelpriy

1,675
17
28

1

@SaurabhLP Apple has discontinued windows version of Safari in 2012, so i think we should not be worried for this anymore. – Sheelpriy Nov 22 '17 at 08:30

score 11 · Answer 2 · answered Jun 04 '12 at 16:34

11

From what I see, video is not a function, so why do you have parentheses? That's your error.

So instead of video() just use video

answered Jun 04 '12 at 16:34

score 3 · Answer 3 · answered Oct 21 '15 at 08:30

3

This is the easiest solution

this.on("pause", function () {
    $('.vjs-big-play-button').removeClass(
        'vjs-hidden'
    ).css('display', 'block');
    this.one("play", function () {
        $('.vjs-big-play-button').addClass(
            'vjs-hidden'
        ).css('display', '');
    });
});

answered Oct 21 '15 at 08:30

Tahir Fazal

313
2
6

2

The easiest solution? This assumes you're using video.js, a third-party library. Some context on your answer would be nice. – Aug 08 '19 at 18:06

score 2 · Answer 4 · edited Mar 12 '14 at 06:22

This kind of works (using jquery) for me in Chrome v22, Firefox v15 and IE10:

$('video').on('click', function (e) {
    if (this.get(0).paused) {
        this.get(0).play();
    }
    else {
        this.get(0).pause();
    }
    e.preventDefault();
});

The preventDefault here stopped the frame jumping problem you see but then it breaks the other buttons on the control section like fullscreen etc.

It looks like there is no easy why of doing it? I would have thought venders would have had click to play by default, it seems the logical thing to do. :|

score 0 · Answer 5 · answered Jul 23 '14 at 12:38

0

$('#video-id').click(function() {
    // jQuery sets this as the DOM element that triggered the event
    // no need to wrap it in jQuery $(this) and unwrap it again $(this).get(0)
    if (this.paused) {
        this.play();
    } else {
        this.pause();
    }
});

answered Jul 23 '14 at 12:38

Martin Quintana

11
1
1

Broken in Firefox; see http://stackoverflow.com/questions/28353352/click-handler-on-video-conflicts-with-firefoxs-native-behaviour/ – Mark Amery Feb 24 '15 at 22:49

score 0 · Answer 6 · answered May 09 '17 at 06:43

This is, I believe, the most simple and easiest way to write what you're trying to achieve:

var myVideo = document.getElementById('exampleVideo');

            $(myVideo).click(function toggleVideoState() {
                if (myVideo.paused) {
                  myVideo.play();
                  console.log('Video Playing');
                } else {
                  myVideo.pause();
                  console.log('Video Paused');
                }
              });

Logging to the console is, of course, just for illustration.

score 0 · Answer 7 · answered Jul 18 '19 at 05:07

            function myFunction(){ 
            var playVideo = document.getElementById('myVideo');
            var button = document.getElementById('myBtn');

            if (playVideo.paused) {
               playVideo.play();
                button.innerHTML= "pause";
            } else {
               button.innerHTML= "play";
               playVideo.pause();
            }
            };

score -2 · Answer 8 · edited Aug 01 '19 at 12:10

-2

document.getElementById("play").onclick = function(){
    if (document.getElementById("videoPlay").paused){
        document.getElementById("videoPlay").play();
    } else {
        document.getElementById("videoPlay").pause(); 
    }
}

edited Aug 01 '19 at 12:10

ZF007

3,708
8
29
48

answered Aug 01 '19 at 05:48

Vishal Yadav

1

2

Writing some explanation along with some code is always a good practice. Thanks! – surajs1n Aug 01 '19 at 06:07
add context. (From Review). – ZF007 Aug 01 '19 at 08:38

play pause html5 video javascript

8 Answers8

Linked

Related