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(\'pl         


        

Answer 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**

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

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

Answer 4

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

Answer 5

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

Answer 6

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.