在手机浏览器上jplayer全屏播放视频设置在播放完成或者中间停止播放后手机浏览器的网页不能上下滚屏的解决

本文主要是介绍在手机浏览器上jplayer全屏播放视频设置在播放完成或者中间停止播放后手机浏览器的网页不能上下滚屏的解决，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在安卓浏览器上进行手机版wap网页视频播放调试的时候发现我用的jplayer视频播放插件，由于当时做的时候要求的是打开自动全屏播放，在电脑端和手机端网页都做了如下处理：

$("#jquery_jplayer_1").jPlayer("play");
$(".jp-full-screen").click();  //最大化到全屏

在电脑端做测试的时候无论是等待视频播放完成还是播放中间终止，该视频的播放网页上下拉动的时候都能滚屏，但是在电脑端测试的时候却发现，在视频播放中间停止或者视频自动播放完成，用手指拖动屏幕上下滚动却没反应。当时第一反应是难道是这视频播放代码不兼容手机上的视频播放造成。一查看官方文档，这个手机端的视频播放demo和电脑端的确实差别挺大。但是看了代码觉得如果按官方demo来改，这工作量有点大啊，而要解决的问题很小，就是手机端的视频播放不能滚屏的问题。我测试了下，在点击播放的时候如果没有

$(".jp-full-screen").click();

这个全屏最大化的这行代码，手机端视频播放自动完成或者中间停止，该网页的屏幕都能够正常滚屏显示的。考虑到一般视频播放最大化和正常播放都是

一个按钮切换的，我于是在视频播放的预加载中两个地方增加了一行代码：

/** 视频播放器预加载*/
$("#jquery_jplayer_1").jPlayer({ready: function () {$(this).jPlayer("setMedia", {title: "video"});},swfPath: "/scripts/plugins/jplayer",//supplied: "flv,m4v",supplied: "m4v",size: {width: "100%",height: "100%",cssClass: "jp-video-full"},ended: function () {$(".jp-full-screen").click();  //最小化，不执行此操作，则不能上下拉动手机屏幕//$.jPlayer.pause();$("#jp_container_1").hide();},fullWindow: true,useStateClassSkin: true,autoBlur: false,smoothPlayBar: true,keyEnabled: true,keyBindings: {closeWindow: { // 自定义关闭窗口函数.key: 27, // 监视键盘ESC是否被按下fn: function (f) {// f is the instance in focus, which is this instance.// f.status is the status object.// f.play() to execute methods, such as play().//alert("Hello World");f.stop();$(".jp-full-screen").click();  //最小化，不执行此操作，则不能上下拉动手机屏幕$("#jp_container_1").hide();}}},remainingDuration: true,toggleDuration: true,//errorAlerts: true,//warningAlerts: true,error: function () {$("#jp_container_1").hide();}
});
在ended函数中及键盘esc取消事件中都增加了：

$(".jp-full-screen").click();
这行代码，经过测试，在手机端播放完成或者中间停止，都能够滚屏了，而且对电脑端的滚屏也没什么影响。这样问题就得以解决

这篇关于在手机浏览器上jplayer全屏播放视频设置在播放完成或者中间停止播放后手机浏览器的网页不能上下滚屏的解决的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---