由于上次写video组件的问题，过于划水，没讲清楚，导致自己花费了很多时间，重新踩坑，对自己很抱歉。
一、自己写的一个基本的视频组件（包含倍速功能）
效果图如下：倍速的显示和隐藏，需在全屏的时候 和 显示控制组件时
代码逻辑
1. 实现倍速的核心是创建视频组件控制器，调用它的倍速方法=》官方文档 uni.createVideoContext(videoId, this) | uni-app官网
let videoContext = uni.createVideoContext;
videoContext.playbackRate(1.5);
2. 如何通过cover-view在原生video组件上写UI
第一，要在 nvue 页面（不然全屏下，cover-view覆盖失效）第二，cover-view组件要放在video组件内部
<template>
<!-- 视频 -->
<view class="videoBox" >
<video
:style="{width: 2*videoWidth+'rpx'}"
id="videoId"
class="video" :src="tempUrl"
:autoplay="true" object-fit="fill"
@fullscreenchange="handleFullScreen"
@controlstoggle="handleControlstoggle"
>
<!-- 后退按钮 -->
<cover-image v-if="!speedState" @click="handleGoBack" class="backBtn" src="../../static/index/return_icon_white.png"></cover-image>
<!-- 倍速按钮 -->
<cover-view v-if="speedState&&controlsToggle" class="speed">
<text @click="speedNum=true" class="doubleSpeed">倍速</text>
</cover-view>
<!-- 倍速面板 -->
<cover-view v-if="speedNum" class="speedModal" @click.stop="speedNum=false" :style="{width:clientHeight+37+'px',height: videoWidth+16+'px'}">
<view class="speedNumBox" :style="{height: videoWidth+16+'px'}">
<text @click.stop="handleSetSpeedRate(0.5)" :class="[0.5 == speedRate?activeClass:errorClass,'number']">0.5</text>
<text @click.stop="handleSetSpeedRate(0.8)" :class="[0.8 == speedRate?activeClass:errorClass,'number']">0.8</text>
<text @click.stop="handleSetSpeedRate(1)" :class="[1 == speedRate?activeClass:errorClass,'number']">1</text>
<text @click.stop="handleSetSpeedRate(1.25)" :class="[1.25 == speedRate?activeClass:errorClass,'number']">1.25</text>
<text @click.stop="handleSetSpeedRate(1.5)" :class="[1.5 == speedRate?activeClass:errorClass,'number']">1.5</text>
</view>
</cover-view>
</video>
</view>
</template>
<script setup>
import {ref,reactive} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import StatusBarCustom from "@/pages/StatusBarCustom.vue";
//视频播放的url
let tempUrl = "https://vdept3.bdstatic.com/mda-piah212eiqj2c8n6/720p/h264/1694433760278042600/mda-piah212eiqj2c8n6.mp4?v_from_s=hkapp-haokan-hbe&auth_key=1694494958-0-0-e6efe783e3f1291c8ae14aafc84c3449&bcevod_channel=searchbox_feed&pd=1&cr=2&cd=0&pt=3&logid=0158851676&vid=10823921248731998514&klogid=0158851676&abtest=112751_4";
/*======================================== 设置视频宽度 ===============================================*/
let videoWidth = ref(0); //设置视频宽度
let clientHeight = ref(0); //设备高度
onLoad(()=>{
uni.getSystemInfo({
success: function (res) {
videoWidth.value = res.screenWidth-16;
clientHeight.value = res.screenHeight;
}
});
});
/*======================================== 倍速功能模块 ===============================================*/
let speedState = ref(false); //监听全屏和退出全屏，控制对应的“返回按钮和倍速按钮是否显示”
let speedNum = ref(false); //倍速的数字蒙版（0.5，0.8，1.0，1.25，1.5）
const activeClass = ref('active');//选中倍速时的颜色样式active是类名
const errorClass=ref('noActive'); //非选中的颜色样式noActive是类名
let speedRate = ref(1); //倍速的值（用来判断选中状态）
//监听进入全屏 和 退出全屏
const handleFullScreen = (e)=>{
//e.detail对象的两个属性fullScreen和direction，一个可以得到true/false 另一个得到horizontal/vertical
speedState.value = e.detail.fullScreen;
}
//倍速按钮：显示的条件 1.首先全屏 2.控件（播放/暂停按钮、播放进度、时间）是显示状态
let controlsToggle = ref(false);
const handleControlstoggle = (e)=>{
controlsToggle.value = e.detail.show;
}
//设置倍速速度
const handleSetSpeedRate = (rate)=>{
let videoContext = uni.createVideoContext("videoId");
videoContext.playbackRate(rate);
speedRate.value = rate;
}
</script>
<style scoped lang="scss">
.videoBox{
display: flex;
justify-content: center;
align-items: center;
}
.video{
}
.backBtn{
position: absolute;
left: 16rpx;
top: 45rpx;
width: 45rpx;
height: 45rpx;
}
.speed{
position: absolute;
right: 20rpx;
top: 16rpx;
.doubleSpeed{
color: #fff;
font-size: 14rpx;
background-color: rgba(0,0,0,0.6);
padding: 4rpx 6rpx;
}
}
// 倍速的蒙版
.speedModal{
background-color: rgba(0,0,0,0.7);
}
.speedNumBox{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #2c2c2c;
width: 120rpx;
position: absolute;
right: 0rpx;
top: 0;
.number{
width: 120rpx;
font-weight: 700;
font-size: 14rpx;
padding: 18rpx 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.active{
color: red;
}
.noActive{
color: #fff;
}
}
</style>cover-view组件的问题
（1）v-for根本无法使用
（2）也不能嵌套 uview-plus组件
=》只能手写状态
二、其它相关问题
1. uniapp获取视频第一帧图片，作为视频的封面
逻辑上就是再url后面，添加?x-oss-process=video/snapshot,t_0,f_jpg
<template>
<video :poster="videoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"></video>
</template>
<script setup>
import {ref} from "vue";
let videoUrl = ref("https://haokan.baidu.com/v?vid=5725386879683902914&tab=recommend&sfrom=recommend")
</script> 对象OSS视频截帧参数
2. video这个原生控件层级层级太高无法覆盖
我想在video视频组件上覆盖一个返回按钮（图片） 和 一段文本（文字），代码和效果图如下
<template>
<!-- 视频组件 -->
<video class="videoBox" :src="courseData.videoUrl" :autoplay="true"></video>
<!-- 在视频上覆盖一段文本 -->
<cover-view class="backBtn">这是内容</cover-view>
<!-- 在视频上覆盖图片 -->
<cover-image style="width: 50rpx;height: 50rpx;position: fixed;top: 100rpx;right: 50rpx;background-color: #000;" src="../../static/index/return_icon_white.png"></cover-image>
</template>3. 去掉video下面的黑边
下面就是视频组件出现黑色边线
文章来源：https://www.toymoban.com/news/detail-716090.html
出现上下出现黑边的原因是： object-fit ：contain；需要修改为 fill 就可以文章来源地址https://www.toymoban.com/news/detail-716090.html
到了这里，关于uniapp video（倍速功能、层级过高、视频第一帧做封面 等问题）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
