在手机浏览器上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();
这行代码,经过测试,在手机端播放完成或者中间停止,都能够滚屏了,而且对电脑端的滚屏也没什么影响。这样问题就得以解决


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值