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.

Solution 1

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

Solution 2

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. :|

Solution 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', '');
    });
});