[uniapp] Subprograma WeChat, tome el primer fotograma del video, siempre que la imagen esté en el sistema operativo de Alibaba Cloud

Al cargar vídeos, etc., el color predeterminado es el negro. El primer fotograma del vídeo no se puede utilizar como portada y el vídeo del vídeo es un componente nativo. El nivel es demasiado alto para cubrir el problema. Aunque hay En la vista de portada, muchas escenas siguen siendo inflexibles.

El requisito previo para la implementación es que la imagen esté en el sistema operativo de Alibaba Cloud.

Su servidor no lo admite. Puede usar Canvas para tomar capturas de pantalla.

Método, reemplace la imagen del componente de imagen con el video del componente de
video

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

Concéntrese en reemplazar el componente de video con el componente de imagen. La dirección aún escribe la dirección del video. Agregue después de la dirección

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

El último componente de imagen de imagen reemplazado.

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

Código fuente:

plantilla

<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>

guion

<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%);
}