需求如图,自定义控件,像腾讯视频那样,还有兼容安卓苹果
不是使用的uniapp项目(uniapp有视频控件自定义插件),是H5+app,CSS+JS+HTML。我的项目能无法使用 cover-view
plus.nativeObj.view 测试时,可以覆盖video,但在全屏情况下无法覆盖
目前准备采用纯 html video标签方式,发现全屏时无法旋转,参考官方文档发现只有获取,但无法设置旋转,苹果系统播放时,会强制使用苹果的播放插件
加载视频HTML页面
var wvVideo = plus.webview.create('', "custom-webview", {
replacewebapi: 'auto',
videoFullscreen: 'landscape'
})
}
wvVideo.loadURL('当前视频播放地址HTML')
var currentWebview = this.$mp.page.$getAppWebview()
currentWebview.append(wvVideo);
视频HTML页面使用以下配置
/**
* 视频全屏播放旋转目前的逻辑
* 视频全屏,即锁定屏幕为横屏。
* 视频恢复,则解除屏幕方向的锁定。
* 具体的切换,根据自己的实际业务做相应的操作。
*/
//Android平台的视频全屏旋转
var fullScreenOfAndroid = function() {
// 最新5+API的支持
var self = plus.webview.currentWebview();
self.setStyle({
videoFullscreen: 'landscape'
});
};
// iOS平台的视频全屏旋转
var fullScreenOfIos = function(videoElem) {
// 监听的事件与Android平台有很大区别
videoElem.addEventListener('webkitbeginfullscreen', function() {
plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏
});
videoElem.addEventListener('webkitendfullscreen', function() {
plus.screen.unlockOrientation(); //解除屏幕方向的锁定
});
};
// // 涉及到5+API的内容,均在plusready事件后调用;
document.addEventListener('plusready', function() {
var osName = plus.os.name;
if (osName === 'Android') {
fullScreenOfAndroid();
} else if (osName === 'iOS') {
var videoElem = document.getElementById('video');
fullScreenOfIos(videoElem);
}
});
几个错别字改了改
6***@qq.com (作者)
老哥,我用的是h5+app,已经上线了,不能转uniapp了,还有什么解决方案吗?
2019-12-31 19:11