play pause html5 video javascript

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:

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

Solution 3:

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

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