Html5视频播放器在自动播放时必须按暂停两次

我正在使用此codepen中的代码http://codepen.io/frytyler/pen/juGfk为我的视频播放器制作自定义控件，除非当我将视频设置为“自动播放” 。它播放的视频，但我必须按两次暂停暂停它，我将如何修改代码来解决这个问题？Html5视频播放器在自动播放时必须按暂停两次

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

来源

2015-12-08 Blake Bowman

在哪里按？暂停按钮或屏幕？ – Ivan

要么你必须在屏幕上按两次或播放/暂停按钮两次在自动播放 –

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

这对屏幕快速的解决方案，在dom.ready内）JS的最后一行（添加该代码段。

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

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


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

});

那里当你在屏幕两次点击后，点击按钮的一个问题，播放/暂停按钮可充当怪异，你需要指定播放/暂停按钮类正常显示，或如果隐藏这一点，会看最好按钮。

编辑：您可以操纵下面的代码播放/暂停按钮：

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 
};

来源

2015-12-08 19:30:29 Ivan

谢谢！只有当我告诉他们双击时，这才解决了这个问题，如果您将自己的codepen设置为自动播放，但仍然不会立即暂停，即使视频正在播放，它仍会显示播放状态。 –

它适用于我，即使我添加了自动播放这个HTML标签，也许你点击了三次 – Ivan

它需要工作没有双击，但播放按钮仍处于播放状态，当视频开始播放时，我需要JS识别它正在播放并进入暂停状态，因此您只需点击一次即可暂停播放视频。 –

Html5视频播放器在自动播放时必须按暂停两次

回答

相关问题