丿疾风
丿疾风
  • 发布:2016-08-03 14:22
  • 更新:2016-08-03 14:22
  • 阅读:10354

Android端实现全屏播放的解决办法

分类:Native.js

之前碰到过视频播放全屏的问题,但是并没有很好解决,后面做网站时用到过一款视屏播放插件jwplayer,后面把它嵌入mui中实现全屏播放了,仅Android端测试,ios未测试。

复制代码<div id="myElement">Loading the player ...</div>  
mui.init();  
mui.plusReady(function () {  
    var nwaitings = plus.nativeUI.showWaiting();  
    jwplayer("myElement").setup({  
        file: "1.MP4",//测试视频,也可引用网络链接  
        height: 200,//视频播放器的高度  
        width: "100%",  
        events: {  
            onReady: function () {  
                nwaitings.close();  
                //jwplayer初始化结束后在显示  
                $(".mui-content").show();  
                $(".jw-icon-fullscreen").on("tap", function () {  
                    var height = $("#myElemen").height();  
                    //根据之前设定的播放器高度确认当前状态是否全屏  
                    if (height == 200) {  
                         //锁定竖屏  
                         plus.screen.lockOrientation("portrait-primary");  
                        //设置延时,屏幕旋转需要一定时间  
                        setTimeout(function () {  
                            //退出全屏  
                            plus.navigator.setFullscreen(false);  
                        }, 200)    
                    } else {  
                        plus.screen.lockOrientation("landscape-primary");  
                        setTimeout(function () {  
                            plus.navigator.setFullscreen(true);  
                        }, 200)  
                    }  
                })  
            }  
        }  
    });  
})  
//虚拟键处理  
mui.back = function () {  
    var height = $("#myElement").height();  
    //虚拟键退出全屏  
    if (!(height == 200)) {  
        plus.screen.lockOrientation("portrait-primary");  
        //jwplayer退出全屏  
        jwplayer("myElement").setFullscreen(false);  
        setTimeout(function () {  
            plus.navigator.setFullscreen(false);  
        }, 200)  
    } else {  
        var self = plus.webview.currentWebview();  
        //关闭播放页面  
        self.close("slide-out-right", 200)  
    }  
}

附件上传Jwplayer插件,里面有使用demo,更多jwplayer的api请百度。
代码中使用了jQuery库,请注意引用。
打开视频播放页面时需要打开硬件加速

复制代码mui.openWindow({  
    url: "test.html",  
    waiting: {  
        autoShow: false  
    },  
    show: {  
        aniShow: 'pop-in',  
        duration: 200  
    },  
    styles: {  
        hardwareAccelerated: true//开启硬件加速  
    }  
})

ps:有什么错误望各位支出,或者给出一些意见

7 关注 分享
Trust asmallbird vaeke 5***@qq.com 1***@qq.com 3***@qq.com 一抱一个胖猪猪

要回复文章请先登录注册

来小新

来小新

判断是否全屏状态:
plus.navigator.isFullscreen()
2018-01-04 13:33
梦如人生

梦如人生

解决了。哈哈
2017-09-15 18:09
梦如人生

梦如人生

还是白屏。无语中。。
2017-09-15 16:32
OnePein

OnePein

回复 9***@qq.com :
解决了吗求问
2017-08-16 15:21
9***@qq.com

9***@qq.com

Error setting up player:MIssing license key,大神,我报了这个错误
2017-07-13 02:41
Dojoson

Dojoson

这个好,最近一直被这个全屏整死,开始用的是video.js,但兼容不是很好,感谢分享啊。
2017-04-11 12:36
1***@qq.com

1***@qq.com

mark
2016-12-19 10:15
2***@qq.com

2***@qq.com

这么叼
2016-11-22 00:57
rodgerz

rodgerz

mark
2016-08-15 17:25