在hybirdApp上模拟视频全屏（ios，android通用）

最新推荐文章于 2024-11-19 09:28:16 发布

qq_42355783

最新推荐文章于 2024-11-19 09:28:16 发布

阅读量844

点赞数

CC 4.0 BY-SA版权

分类专栏： hybirdApp hybirdApp视频文章标签： hybirdApp视频全屏 webview全屏混合App视频模拟全屏

本文链接：https://blog.youkuaiyun.com/qq_42355783/article/details/83507558

hybirdApp 同时被 2 个专栏收录

3 篇文章

订阅专栏

hybirdApp视频

1 篇文章

订阅专栏

本文介绍了一种在Hybrid App中实现视频全屏播放的方法，针对iOS和安卓平台的兼容性问题，通过cordova插件和自定义JS代码实现了虚拟全屏功能，解决了头部和底部栏的遮挡问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间写HyBrid App，因为video全屏fullScreen在iOS上根本不能用，安卓上又有很多问题，canvas画出来的全屏安卓低版本又压根不能用，在网上搜索也是各种不得法，所以决定自己借助插件写一个虚拟全屏，首先需要把ios的头部和安卓的头部和底部隐藏掉，这样里面的网页就变成了全屏。

cordova的$cordovaStatusbar插件可以解决掉iOS的头部，附一个插件的地址但是安卓还有底部栏啊啊啊！！！于是我又继续搜索安卓的插件，终于让我搜到了一个Full Screen Plugin for Cordova,安卓虚拟全屏，支持4.0+，然后重头戏就来了，点击全屏的小按钮以后，需要把视频占满屏幕，其他的都隐藏掉，或者层级变低到下面看不到的地方去，在这里我推荐的算法是videogular里面的一段js，如果你的页面只有一个视频的话，可以用videogular全套的插件，但是博主我的页面是多个视频，并且除了全屏都已经写好了，实在是不忍心重头再来，所以我直接运用了videogular里的一段全屏的js，有所删减和改动；

this.isFullScreen=false;
$(ele).click(function(){
//强制横屏
this.toggleFullScreen = function () {
//console.log(this.mediaElement[0]);
//console.log(navigator.userAgent);
//console.log(window.orientation);
//console.log($($(this.mediaElement[0]).parents('.videogular-container')));
if (true) {
var reduceHeight = 0;
var deviation=10;
var obj = $(this).closest('.exp_video');
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;

var width =parseInt(obj.css("width")) ;
var height = parseInt(obj.css("height"));
// console.log(width);

if (this.isFullScreen) {
$(this).parents('.exp_video').css({'transform': 'rotate(0deg) translate3d(0,0,0) scale(1) ','-webkit-transform': 'rotate(0deg) translate3d(0,0, 0) scale(1) ',"position":"static","left":"0","right":"0","top":0,"bottom":0,"height":"auto ","width":"100%","z-index":99,"margin-top":"0"});
$(".scroll-content").css({"z-index": "998"});

//恢复样式
$(this).closest('.exp_video').css({"paddingTop":8+"px"});
$(".has-header").css({"top":50+"px"});
$("#detailWrap").css({"margin":"12px 10px 0"});
$(".scroll .exp_border_all").css({"marginBottom":"10px"});
$("ion-header-bar").show();
this.isFullScreen = !this.isFullScreen;
}else {
$(".scroll-content").css({"z-index": "999"});
$(this).closest('.exp_video').css({'transform': 'rotate(90deg) translate3d('+((screenHeight-width)/2-reduceHeight-deviation) +'px, '+(screenHeight-screenWidth)/2+'px, 0px) scale(1) ','-webkit-transform': 'rotate(90deg) translate3d('+((screenHeight-width)/2-reduceHeight-deviation) +'px, '+(screenHeight-screenWidth)/2+'px, 0px) scale(1) ',"position":"fixed","left":"0","right":"0","top":0,"bottom":0,"height":screenWidth+"px","width":screenHeight+'px',"z-index":9999,"margin-top":0});

//全屏时的样式
$(this).closest('.exp_video').css({"padding":0});
$(".has-header").css({"top":0});
$("#detailWrap").css({"margin":0});
$(".scroll .exp_border_all").css({"marginBottom":0});
$("ion-header-bar").hide();
this.isFullScreen = !this.isFullScreen;
}


}else {

}

};
this.toggleFullScreen();

});