CODEWITHSUNDEEP
javascriptcsshtmlvideomp4
Blake Bowman
Blake Bowman

Reputation: 311

Html5 video player have to press pause twice when on autoplay

I am using the code in this codepen http://codepen.io/frytyler/pen/juGfk to make custom controls for my video player which works great except when I have the video set to "autoplay" like in the code below. It plays the video but I then have to press pause twice to pause it, how would I modify the code to solve this?

<video id="myVideo" autoplay controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >

Upvotes: 0

Views: 1235

Answers (1)

Ivan
Ivan

Reputation: 1241

http://codepen.io/anon/pen/PZwxed

It's quick solution for screen, adding this snippet at last line of js inside of dom.ready().

     //doubleclick
    $('#myVideo').click(function () {
       if ($("#myVideo").get(0).paused) {
           $("#myVideo").get(0).play();
       } 
    });

     $('#myVideo').dblclick(function () {


       $("#myVideo").get(0).pause();

});

there a problem, play/pause button may act weird when you click button after of click twice in screen, you need to assign play/pause button class to display properly or it would look best if you hide this button.

EDIT: You may manipulate play/pause button in following code:

var vid = document.getElementById("myVideo");
     vid.onplaying = function() {
  //call when video is playing, it should show pause icon in button like .addClass and .removeClass
};
     vid.onpause = function() {
  //call when video is paused, it should show play icon in button like .addClass and .removeClass
};

Upvotes: 2

Related Questions