前一阵子用了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;
}
三、备注
- 本文需要结合uniapp中使用videojs构建H5直播播放器来看
