uniapp video（倍速功能、层级过高、视频第一帧做封面等问题）

男娘i 2024-04-22 15:08 73阅读 0赞

> 由于上次写video组件的问题，过于划水，没讲清楚，导致自己花费了很多时间，重新踩坑，对自己很抱歉。

## 一、自己写的一个基本的视频组件（包含倍速功能） ##

效果图如下：倍速的显示和隐藏，需在全屏的时候 和 显示控制组件时

![195a7a5edce346f9b6a681a462443ba1.png][]

![c6d7ccb078fa4f258aa7b63a1f09fda2.png][]

> 代码逻辑  
> 1. 实现倍速的核心是创建视频组件控制器，调用它的倍速方法
> 
> =》官方文档 [uni.createVideoContext(videoId, this) | uni-app官网][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视频截帧参数**

![974cc1a2929b4228950e4f9036df7b52.png][]

###  ###

### 2. video这个原生控件层级层级太高无法覆盖 ###

我想在video视频组件上覆盖一个返回按钮（图片） 和 一段文本（文字），代码和效果图如下

![13f1e684d7834bf4b7b3cfeb0ab32667.jpeg][]

###  ###

### 3. 去掉video下面的黑边 ###

下面就是视频组件出现黑色边线

![76aae00a17584749ae2ade5a6233d3d8.png][]

出现上下出现黑边的原因是： object-fit ：contain；需要修改为 fill 就可以

[195a7a5edce346f9b6a681a462443ba1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/76fc64d1014548f5a81c88c1b6051608.png
[c6d7ccb078fa4f258aa7b63a1f09fda2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/3868c4003d184eee9caf46b3a53fccb8.png
[uni.createVideoContext_videoId_ this_ _ uni-app]: https://uniapp.dcloud.net.cn/api/media/video-context.html
[974cc1a2929b4228950e4f9036df7b52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f7e443b296074ecbbc38c8b00e87e182.png
[13f1e684d7834bf4b7b3cfeb0ab32667.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/3e939d2c1a6c42d6bb012df957660b39.jpeg
[76aae00a17584749ae2ade5a6233d3d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/6fc793c520034cc0acc105b44f7b9c99.png