之前碰到过视频播放全屏的问题,但是并没有很好解决,后面做网站时用到过一款视屏播放插件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:有什么错误望各位支出,或者给出一些意见