需求如图,自定义控件,像腾讯视频那样,还有兼容安卓苹果
不是使用的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