uniapp中控制videojs视频播放器全屏以及退出全屏切换的另一种思路
前一阵子用了videojs作为视频播放器,之前为了页面的美观性,把播放器本身的工具栏隐藏了,也就是说播放按钮、全屏按钮等等需要自定义,对于播放、暂停之类的操作,videojs本身是有API的,用起来也挺方便的,但是全屏没有发现有API方法,后来网上查了好多资料,发现全屏以及退出全屏对于所有元素其实都是适用的,一般来说,全屏是:element.requestFullscreen(),退出全屏是:document.exitFullscreen(),并且为了兼容不同浏览器有不同的方法。但是试了安卓是正常的,iOS里面不能全屏,所以只能考虑其他方案了,后来在想,视频全屏无非就是想把视频显示区域放大,那我手动放大显示区域行不行呢,于是试了一下,感觉还行。效果如下:
一、思路
- 自定义全屏按钮,点击全屏按钮放大视频显示区域,增加旋转动画
- 每次点击之后记录当前是否处于全屏模式的状态,通过此状态动态调整进入全屏-退出全屏的图标
- 全屏之后,需要调整视频播放区域的层级以及高度等,以便于全屏之后能够操作视频上的按钮等
二、代码
1.播放器外层容器定义动态样式,播放器本身增加动画
<!-- 示例代码 -->
<!-- 播放器显示区域 -->
<!-- #ifdef H5 -->
<view
class="video-display-wrap"
:style="{ height: videoDisplayHeight, zIndex: videoDisplayZIndex }"
>
<view
class="video-js"
:class="{
'video-rotate-ani': isFullScreen,
'video-rotate-back-ani': !isFullScreen && !isFirstLoad
}"
ref="video"
style="width: 100%; height: 100%"
></view>
<!-- 返回按钮 -->
<image
v-if="isFullScreen"
:src="resource.backBtnIcon"
mode="heightFix"
class="full-screen-btn-icon back-btn"
@tap.stop="switchFullScreen"
></image>
<!-- 返回按钮 -->
<!-- 播放按钮 -->
<image
v-if="isShowPlayBtn"
:src="resource.playBtnIcon"
mode="heightFix"
class="play-btn-icon"
@tap.stop="playVideo"
></image>
<!-- 播放按钮 -->
<!-- 全屏小按钮 -->
<image
v-if="isShowFullBtn"
:src="videoFullScreenIcon"
mode="heightFix"
class="full-screen-btn-icon"
:class="{ 'video-full-icon-pos': isFullScreen }"
@tap.stop="switchFullScreen"
></image>
<!-- 全屏小按钮 -->
</view>
<!-- #endif -->
<!-- 播放器显示区域 -->
2.定义变量记录当前是否处于全模式
data() {
return {
//资源图标
resource: {
...
//播放按钮图标
playBtnIcon:
this.$cnf.resDomains.image +
'/1/20102/2022/0418/625cee3f79c73v4lb.png',
//进入全屏按钮图标
enterFullScreenIcon:
this.$cnf.resDomains.image +
'/1/20102/2022/0504/62722edb0420at1hj.png',
//退出全屏按钮图标
exitFullScreenIcon:
this.$cnf.resDomains.image +
'/1/20102/2022/0506/6273f4d06f96cgu6s.png',
//全屏的时候返回按钮
backBtnIcon:
this.$cnf.resDomains.image +
'/1/20102/2022/0506/6274d2b32b769kgeb.png'
},
//当前是否是全屏模式
isFullScreen:false,
//定义页面是否首次加载(默认是首次加载)
isFirstLoad:true,
//活动数据(业务中用到)
activityDetail:{}
...
}
}
3.切换全屏方法
//切换视频全屏
switchFullScreen() {
if (this.isFirstLoad) {
//标记已经不是首次加载了,避免首次页面加载的时候播放器有旋转的动画
this.isFirstLoad = false
}
this.isFullScreen = !this.isFullScreen
},
4.页面样式控制的相关计算属性
computed: {
//视频显示区域的层级
videoDisplayZIndex() {
//如果是横屏模式并且当前是全屏模式
if (this.activityDetail.style.mode == 2 && this.isFullScreen) {
return 10075
} else {
return 999
}
},
//视频显示区域高度
videoDisplayHeight() {
//如果是横屏模式并且当前是全屏模式
if (this.activityDetail.style.mode == 2 && this.isFullScreen) {
const systemInfo = uni.getSystemInfoSync()
return systemInfo.windowHeight + 'px'
} else {
return 'auto'
}
},
//视频全屏/退出全屏图标
videoFullScreenIcon() {
if (this.isFullScreen) {
return this.resource.exitFullScreenIcon
} else {
return this.resource.enterFullScreenIcon
}
},
...
}
5.部分css样式
//视频显示区域样式
.video-display-wrap {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
overflow: hidden;
.play-btn-icon {
position: absolute;
z-index: 999;
width: 100rpx;
height: 100rpx;
}
.full-screen-btn-icon {
position: absolute;
bottom: 20rpx;
right: 20rpx;
z-index: 999;
width: 50rpx;
height: 50rpx;
}
.back-btn {
top: 30rpx;
right: 30rpx;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
}
//进入全屏的旋转放大动画
.video-rotate-ani {
animation: videoRotateAni 0.8s 1 forwards;
@keyframes videoRotateAni {
0% {
transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
}
100% {
transform: rotate(90deg) scale(1.77);
-webkit-transform: rotate(90deg) scale(1.77);
}
}
}
//退出全屏的动画
.video-rotate-back-ani {
animation: videoRotateBackAni 0.8s 1 forwards;
@keyframes videoRotateBackAni {
0% {
transform: rotate(90deg) scale(1.77);
-webkit-transform: rotate(90deg) scale(1.77);
}
100% {
transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
}
}
}
//动态调整全屏按钮的位置
.video-full-icon-pos {
left: 30rpx !important;
bottom: 30rpx !important;
}
作者:周星星的学习笔记
链接:https://www.jianshu.com/p/0f0836d74e4d
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
1.本站默认解压密码为:xiaoqingtai.com
2.本站所有内容均由互联网收集整理,仅供大家参考、学习,禁止商用。
3.本站所有内容版权归原著所有,如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注
小青苔基地 » uniapp中控制videojs视频播放器全屏以及退出全屏切换的另一种思路
2.本站所有内容均由互联网收集整理,仅供大家参考、学习,禁止商用。
3.本站所有内容版权归原著所有,如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注
小青苔基地 » uniapp中控制videojs视频播放器全屏以及退出全屏切换的另一种思路