[uniapp] Miniaplicativo WeChat, tire o primeiro quadro do vídeo, desde que a imagem esteja no sistema operacional do Alibaba Cloud

Ao enviar vídeos, etc., a cor padrão é preta. O primeiro quadro do vídeo não pode ser usado como capa e o vídeo do vídeo é um componente nativo. O nível é muito alto para cobrir o problema. Embora haja uma visão de capa, muitas cenas ainda são inflexíveis.

O pré-requisito para implementação é que a imagem esteja no sistema operacional do Alibaba Cloud

Seu servidor não suporta isso. Você pode usar o canvas para fazer capturas de tela.

Método, substitua a imagem componente da imagem pelo vídeo componente do vídeo
componente de vídeo

 <video :src="item.url" autoplay  loop :controls = 'true' :show-fullscreen-btn='false'></video>

Concentre-se em substituir o componente de vídeo pelo componente de imagem. O endereço ainda escreve o endereço do vídeo. Adicione após o endereço

'?x-oss-process=video/snapshot,t_0,f_jpg'

O último componente de imagem de imagem substituído

<image :src="imgsrc +'?x-oss-process=video/snapshot,t_0,f_jpg'" 	mode="aspectFill"></image>

Código fonte:

modelo

<view class="u-rela" 
	v-for="(item,i) in videoList" :key="i" 
	:class="[(i==3 || i==7) ? 'u-m-r-0' : 'u-m-r-18']"
	@click.stop="previewFun(item)"
	>
		<image
		:src="item.img+'?x-oss-process=video/snapshot,t_0,f_jpg'" 
		mode="aspectFill" class="u-w-150 u-h-150"  ></image>
		<image src="@/static/img/stop.png" mode="" class="stopimg"></image>
	</view>
	
	<!-- 视频预览 -->
	<u-popup :show="videoshow" @close="videoshow=false">
		<view class="popbox">
			<image src="@/static/img/close.png" mode="" class="guanimg" @click="videoshow=false"></image>
			<video
			:src="videosrc"
			autoplay
			loop
			:controls = 'true'
			:show-fullscreen-btn='false'
			play-btn-position='center'
			>
			</video>
		</view>
			
	</u-popup>

roteiro

<script>
	export default{
    
    
	data(){
    
    
			return{
    
    
				videoList:[
					{
    
    img: 'https://oss.xinshicm.top/video/20230814/5580e6487a9258116d23bd8e2403daca.mp4'}
				], // 视频数组
				videoshow:false,
				videosrc:''
			}
		},
		methods:{
    
    
			// 预览视频
			previewFun(item){
    
    
				this.videoshow = true;
				this.videosrc = item.img;
			},
		}
	}
</script>

css

.popbox{
    
    
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	padding: 0 32rpx;
	background-color: #000;
	.guanimg{
    
    
		width: 60rpx;
		height: 60rpx;
		margin: 20rpx 0;
	}
	video{
    
    
		width: 686rpx;
		height: 80vh;
	}
}
.u-rela{
    
    
	positon:relative;
}
.stopimg{
    
    
	width: 54rpx;
	height: 54rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}