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

Question

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

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

Answer 1

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