在手机浏览器上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全屏播放视频设置在播放完成或者中间停止播放后手机浏览器的网页不能上下滚屏的解决的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/768182

相关文章

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》:本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面,查看左下角从左

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM

XML重复查询一条Sql语句的解决方法

《XML重复查询一条Sql语句的解决方法》文章分析了XML重复查询与日志失效问题,指出因DTO缺少@Data注解导致日志无法格式化、空指针风险及参数穿透,进而引发性能灾难,解决方案为在Controll... 目录一、核心问题:从SQL重复执行到日志失效二、根因剖析:DTO断裂引发的级联故障三、解决方案:修复