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

我有一个基于窗口大小播放/暂停HTML5视频的脚本。当用户进入全屏时，视频播放。当用户退出全屏时，视频会按预期暂停。如果您在暂停的视频上再次输入全屏，则会调用播放，然后立即暂停。JavaScript函数逻辑播放/暂停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和完整的脚本。

我可以在逻辑中做些什么来防止第二次暂停呼叫？

来源

2016-02-13 Brian

我无法重现您的问题，我可能会错过一些上下文。你能告诉我们更多的代码吗，特别是如何定义'm'和'v'，在哪里设置请求全屏的处理程序以及HTML的相关位？ – Arthur

@Arthur刚刚添加了一个代码块和完整脚本的CodePen链接。 – Brian

您只对全屏状态下的_change_做出反应，但实际上并未检查事件是通过全屏幕的_in_还是_out_触发的。 http://www.intheloftstudios.com/blog/detecting-html5-video-fullscreen-and-events有一个简单的例子，如何确定。 – CBroe

我找到了问题的根源。

这里是你的代码的一般结构：

$(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 
    }); 
)}; 
)};

你可以看到，增加了对“webkitfullscreenchange”事件......处理程序的代码是处理器内部的。细胞点击活动！

这里发生了什么：每次点击单元格时间，您请求的全屏，并你对“webkitfullscreenchange”事件添加一个新的事件处理程序（jQuery中，on注册一个新的事件处理程序，它如果有的话不会取代之前的）。

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

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

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

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

因此，这是最终解决方案：设置您的处理程序，以便根据评论中的@CBroe建议，检查您是否进入或退出全屏模式（使用document.webkitIsFullScreen），并相应播放或暂停。

$('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如果你想看看。

来源

2016-02-14 11:18:40 Arthur

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

回答

相关问题