前言

根据上次发布的文章进一步改善了全屏横屏播放，去除了导航栏,实现伪全屏，但是ios系统不行，只能用自带的全屏按钮，让用户点击。
来点我遇到的问题吧
1.就是一开始我用的uni.getSystemInfo(OBJECT) 来获取当前手机的可视窗口的宽度和高度，结果发现，我手机可以。大BOSS的手机上完全撑大了，看不见取消全屏的图标了，我翻了上篇文章发现我没有用到这个系统的可视窗口的高度和宽度，来进行全屏。所以修改成原来的样子
2.全屏按钮的隐藏处理，一开始是想用video自带的事件来监听默认控件的显示隐藏，结果发现h5好像不支持controlstoggle这个事件
我为什么想隐藏全屏按钮呢
原因：

不太美观
视频太大了，有的有四个多小时，一开始初始化的时候全屏按钮是显示的，但是视频中间播放按钮下面是时长还处于0：00，如果点击全屏，我发现我写的全屏按钮事件，不会将屏幕旋转过来，只会把视频放大，所以不得不一开始就把全屏按钮隐藏

3.因为现在智能机都有手势返回，所以用户用手势返回时，没有触发我的取消全屏事件，就导致视频的高度和宽度还没还原。

提示：以下是本篇文章正文内容，下面案例可供参考

一、废话不多说直接上代码

HTML

<view class="video-box" id="videoBox"><video class="video" id="myVideo" controls :src="itemInfo.url" :poster="itemInfo.bgUrl"style="object-fit:fill" @waiting="wait" @timeupdate="displayimg" @play="play" :show-fullscreen-btn="fullscreenBtn" ></video><view class="ComedyScreenBox" v-if="showComedy"><!-- 全屏按钮 --><view class="ComedyScreen" @click.stop="ComedyScreen(1)" v-show="!ComedyScreenStatus"><image src="../../../static/images/index/screen.png" mode=""></image></view><!-- 退出全屏按钮 --><view class="ComedyReturn" @click.stop="ComedyScreen(0)" v-show="ComedyScreenStatus"><image src="../../../static/images/index/screen1.png" mode=""></image></view></view></view>

CSS样式

.video-box {width: 750rpx;height: 422rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;z-index: 999;
}
.video {width: 750rpx;height: 422rpx;
}
#myVideo {width: 100%;height: 211px;z-index: 999;display: flex;align-items: center;justify-content: center;position: relative;
}
.ComedyScreenBox {z-index: 1000;position: absolute;right: 0;top: 0;width: 20px;height: 20px;padding: 5px;
}
.ComedyScreenBox image{width: 64rpx;height: 64rpx;
}.ComedyScreen {width: 100%;height: 100%;background-repeat: no-repeat;cursor: pointer;position: absolute;right: 0;transform: rotate(90deg);
}.ComedyReturn {width: 100%;height: 100%;cursor: pointer;position: absolute;right: 0;transform: rotate(90deg);
}

export default {data() {return {fullscreenBtn:false,//控制video自带的全屏按钮是否显示showComedy:false,//控制自己自定义的全屏按钮是否显示ComedyScreenStatus: false,//是否处于全屏状态phoneSystem:''//记录什么系统}}
},
onLoad: function(options) {// 记录手机系统uni.getSystemInfo({success: (item) => {this.phoneSystem = item.platform;}})},onShow() {let self = this//安卓系统执行if (this.phoneSystem == 'android') {//监听屏幕旋转window.addEventListener('orientationchange', function(event) {self.orientation = window.orientation//判断是否处于全屏状态，因为现在手机有手势滑动返回，导致伪全屏不能判断let isFullSceen = document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreenif (self.ComedyScreenStatus == true && !isFullSceen) {//返回最初始的状态self.ComedyScreen()}if (window.orientation == 180 || window.orientation == 0) {self.left = false}if (window.orientation == 90 || window.orientation == -90) {self.left = true}});}else{this.showComedy=falsethis.fullscreenBtn=true}},methods: {//播放，继续事件play(e) {// alert(e)console.log(e, "播放")this.showComedy = true},//视频处于缓冲状态wait(res) {console.log('加载中...')let isFullSceen = document.isFullScreen || document.mozIsFullScreen ||             document.webkitIsFullScreen//不处于全屏状态时，全屏按钮隐藏if (!this.ComedyScreenStatus && !isFullSceen) {this.showComedy = false}},// 播放进度变化时触发，触发频率 250ms 一次displayimg() {if (this.phoneSystem == 'android') {this.showComedy = true}console.log('加载成功...')},//全屏事件ComedyScreen(status, title) {let _this = this;if (status) {const dom = document.documentElement;var rfs = dom.requestFullScreen || dom.webkitRequestFullScreen || dom.mozRequestFullScreen || dom.msRequestFullscreen;if (typeof rfs != "undefined" && rfs) {rfs.call(dom);let el = document.getElementById('myVideo');let el2 = document.getElementById('videoBox');el2.style.width = "100%";el2.style.height = "100%";el.style.width = "100%";el.style.height = "100%";if (_this.left) {el.style.transform = 'rotate(90deg)';el2.style.transform = 'rotate(90deg)';}_this.ComedyScreenStatus = true;};}if (!status) {this.$nextTick(function() {let that = this;uni.getSystemInfo({success: function(res) {let el2 = document.getElementById('videoBox');el2.style.width = "100%";el2.style.height = "211px";el2.style.position = "fixed";el2.style.transform = 'rotate(0deg)';let el = document.getElementById('myVideo');el.style.width = '100%';el.style.height = '211px';el.style.position = 'relative';el.style.top = '0';el.style.left = '0';el.style.zIndex = 999;el.style.transform = 'rotate(0deg)';that.ComedyScreenStatus = false;// 退出全屏let ol = documentlet cfs = ol.cancelFullScreen || ol.webkitCancelFullScreen || ol.mozCancelFullScreen || ol.exitFullScreenif (typeof cfs != "undefined" && cfs) {cfs.call(ol);}}});});}},}

总结

目前效果还能接受，目前还没发现什么bug
欢迎大家评论交流。

uni-app 微信公众号H5开发里面的video 组件点击全屏后不会自动横屏播放 2相关推荐

微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片背景解决方案文章参考背景微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...
uniapp微信公众号h5开发--（微信开发回调、背景音乐自动播放、微信朋友分享、微信扫一扫）一站式踩坑
微信公众号开发,一站式踩坑开发前提:例如你们域名是https://www.baidu.com 配置nginx反向代理,把你项目的端口重定向到你们测试环境或线上环境域名 # 访问https://bai ...
微信公众号H5开发，实现网页授权（静默登录）
文章目录业务场景具体实现 1. 配置微信后台 2. 上传校验文件 3. 网页静默授权附:官方文档业务场景最近我司有个2C的需求,以分享链接的形式推广某线上活动, 要求一个链接覆盖微信.H5和 ...
微信公众号H5开发登录授权流程
很久没写博客了,最近实在是太忙,有太多东西想写想记录.今天写个关于微信登录的过程吧,这次项目是我第一次写关于微信的东西,这个登录授权搞了半天.但总算是把流程搞明白了,先附上微信官方文档微信公众平台 ...
【腾讯位置组件】微信公众号h5 调用腾讯地图组件
预览腾讯地图官方网址代码示例 <template><view></view> </template> <script>export de ...
微信公众号H5开发——调用相册和摄像头并上传服务器
之前的文章介绍了关于微信JSSDK调用,下面介绍一下其中的一个最常用的功能--调用相册和摄像头使用此功能之前先参考:微信JSSDK 在通过了config接口验签成功之后,我们就可以调用微信JSSDK ...
springboot+uniapp(vue) 微信公众号h5开发
代码基于jeecgboot 的uniapp项目修改业务类相关代码 //region 授权登录/*** 获取code的地址* @return*/@Overridepublic String getCo ...
微信公众号h5实现高德/百度/腾讯地图导航
最近做了个微信公众号h5需求是这样的 1.点击地图进入地图详情 2.地图详情包括开始导航与地图(高德,百度,腾讯)选择,点击开始导航自动跳转该地图app 首先先理一下功能: 1:第一张图是直接显示坐标 ...
uniapp 开发微信公众号H5 隐藏右上角扩展按钮
uniapp 开发微信公众号H5 隐藏右上角扩展按钮 1.首先使用npm安装一下微信的jsApi (这个应该都会吧就跟vue使用npm安装依赖一样) 初始化: npm init -y 安装微信模块: ...

uni-app 微信公众号H5开发里面的video 组件点击全屏后不会自动横屏播放 2

文章目录

前言

一、废话不多说直接上代码

总结

uni-app 微信公众号H5开发里面的video 组件点击全屏后不会自动横屏播放 2相关推荐

最新文章

热门文章

uni-app 微信公众号H5开发 里面的video 组件点击全屏后不会自动横屏播放 2

文章目录

前言

一、废话不多说直接上代码

总结

uni-app 微信公众号H5开发 里面的video 组件点击全屏后不会自动横屏播放 2相关推荐

最新文章

热门文章

uni-app 微信公众号H5开发里面的video 组件点击全屏后不会自动横屏播放 2

uni-app 微信公众号H5开发里面的video 组件点击全屏后不会自动横屏播放 2相关推荐