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

Html5 video player have to press pause twice when on autoplay

本文关键字：暂停 两次 播放器 视频 自动播放 Html5      更新时间：2023-09-26

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

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

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
};
相关文章：