用于播放/暂停HTML5视频的JavaScript函数逻辑

Question

我有一个脚本根据窗口大小播放/暂停HTML5视频。当用户进入全屏时，视频会播放。当用户退出全屏时，视频会按预期暂停。如果您在暂停的视频上再次输入全屏，则会调用播放然后立即暂停。

这是播放/暂停脚本和控制台日志：

// Listen for exiting fullscreen, hide video element.
    $("#" + m).on("webkitfullscreenchange", function(e) {
      this.className = "hide";
      if($("#" + m).get(0).paused) {
        v.play();
        console.log('playing...')
      } else {
        v.pause();
        console.log('pausing...')
      }

以下是 CodePen demo ，其中包含代表性HTML和完整脚本。

我可以在逻辑中做些什么来阻止第二次暂停通话？

Answer 1

我找到了问题的根源。

以下是代码的一般结构：

$(document).ready(function() {

  $('.cell').on('click', function() {

    // some more code ...

    $("#" + m).on("webkitfullscreenchange", function(e) {
      // here the code for the event handler that pauses and plays the video
    });
  )};
)};

你可以看到在＆＃34; webkitfullscreenchange＆＃34;上添加处理程序的代码。 event ...位于.cell点击事件的处理程序内！

发生了什么：每次点击单元格，您都要求全屏，您在＆＃34; webkitfullscreenchange＆＃34上添加新的事件处理程序 ; event（在jQuery中，on注册一个新的事件处理程序，如果有的话，它不会替换前一个事件处理程序。）

第一次单击时，添加处理程序并请求全屏模式：它会发出事件，您的单个处理程序会获取它并播放视频。

但是第二次单击时，您要求全屏模式并添加第二个处理程序。当事件发出时，两个处理程序都会做出反应：第一个播放视频，第二个...立即暂停。

所以这里是解决方案的一部分：只需删除你在click事件处理程序中注册更多事件处理程序的部分（根据经验，你必须在其他处理程序中设置处理程序的情况非常具体，所以如果你没有任何具体原因，不要这样做。）

为什么要分开？因为即使它解决了你的第一个问题，它确实会留下另一个问题：如果你点击，让视频完成，然后退出全屏模式会发生什么？处理程序将被调用，验证视频是否正在播放，注意它是否正在播放，并开始播放...即使您刚刚全屏播放。

所以这里是最终的解决方案：设置你的处理程序，以便它检查你是否刚进入或退出全屏模式（使用document.webkitIsFullScreen），并相应地播放或暂停，如@ CBroe在评论中提出建议。

$('video').on('webkitfullscreenchange', function(e) {
  if(document.webkitIsFullScreen) {
    this.play();
  } else {
    this.className = "hide";
    this.pause();
  }
});

我forked your CodePen and set up the full solution如果你想看看。