Question

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

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

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

1 个答案: