[uniapp] WeChat アプレット、写真が Alibaba Cloud の OSS 上にある場合に限り、ビデオの最初のフレームを取得します

動画などをアップロードする場合、デフォルトの色が黒であること、動画の最初のフレームをカバーとして使用できないこと、動画の動画がネイティブコンポーネントであることなど、レベルが高すぎて問題をカバーできない点はありますが、カバービューではあるものの、多くのシーンはまだ柔軟性に欠けています。

実装の前提条件は、イメージが Alibaba Cloud の oss 上にあることです

サーバーはこれをサポートしていません。キャンバスを使用してスクリーンショットを撮ることができます。

方法は、ピクチャーコンポーネントイメージをビデオコンポーネントビデオ
コンポーネントビデオに置き換えます。

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

ビデオコンポーネントを画像コンポーネントに置き換えることに注目してください。アドレスはビデオのアドレスを書き込みます。アドレスの後に追加します。

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

最後に置き換えられた画像画像コンポーネント

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

ソースコード：

テンプレート

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

脚本

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