uniapp 打包apk 播放带透明通道的webm格式视频

qq_316837752025-02-08 14:26

<view v-show="spShow" class="sp-class" v-html="videoHtm()"></view>

.sp-class {
		position: fixed;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 100vh;
		z-index: 10080 !important;
		// border: 1rpx solid red;
	}

videoHtm() {
				let vm = this;
				let videoUrl = 'http://192.168.1.95:9300/statics/output88888.webm'
				return `<video 
			 width="300" height="300"
			 style="width: 100%;height: 100%;z-index: 10080 !important;" 
			 src="${videoUrl}" class="transparent-video" autoplay muted loop preload="auto"></video>`
			},

.transparent-video::cue {
		display: none;
	}

	.transparent-video::-webkit-media-controls-panel {
		background-color: transparent;
	}

可以用AE导出 .mov 格式的视频,这种格式可以是背景透明的

在用ffmpeg 查看导出的视频是否确认带透明通道

如果带透明通道可以将mov格式视频,转换为webm格式视频

浏览器测试有透明背景
ffmpeg -i 222.mov -c:v libvpx-vp9 -pix_fmt yuva420p -metadata:s:v:0 alpha_mode="1" output88888.webm

转换完成后,在测试视频是否带有透明通道,如有,可在浏览器,和uniapp打包apk上测试

mov视频转换为webm格式的视频并压缩

新建bat文件,复制以下内容

ffmpeg -i %1 -c:v libvpx-vp9 -pix_fmt yuva420p -metadata:s:v:0 alpha_mode="1" middle.webm
ffmpeg -i middle.webm -c:v libvpx-vp9 -crf 32 -c:a libopus -b:a 128k %1.webm
del "middle.webm"