叶子源码 - 最专业的APP源码-网站模板-整站源码-游戏源码-棋牌源码提供商

专业的网站源码开发商 -叶子源码

栏目分类
热点内容

完美解决Hbuilder不能全屏播放视频的方法

文章分类:app教程 整理发布:叶子源码 更新时间:2019-09-12 14:34

之前碰到过视频播放全屏的问题,但是并没有很好解决,后面做网站时用到过一款视屏播放插件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//开启硬件加速  
    }  
})  
附件下载地址: https://www.lanzous.com/i64tkmb

转载请注明:叶子源码(最专业的源代码资源站)

Copyright 2002-2020 http://www.115ad.com/ All Rights Reserved

最专业的APP设计、网站源码二次开发、游戏源码提供商

百度蜘蛛 RSS订阅