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

复制代码
<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"
相关推荐
知识分享小能手8 分钟前
CSS3学习教程,从入门到精通, 学院网站完整项目 - HTML5 + CSS3 实现(25)
前端·javascript·css·学习·css3·html5·前端项目
27669582929 分钟前
拼多多 anti-token unidbg 分析
java·python·go·拼多多·pdd·pxx·anti-token
Moment28 分钟前
终于搞懂了!Source Map 是如何让你定位打包后代码的?💥 💥 💥
前端·javascript·webpack
xyliiiiiL41 分钟前
二分算法到红蓝染色
java·数据结构·算法
编程、小哥哥44 分钟前
spring之添加freemarker模版熏染
java·后端·spring
yang_love10111 小时前
Webpack vs Vite:深度对比与实战示例,如何选择最佳构建工具?
前端·webpack·node.js
好_快1 小时前
Lodash源码阅读-keysIn
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-nativeKeysIn
前端·javascript·源码阅读
hong_zc1 小时前
Spring 拦截器与统一功能的处理
java·后端·spring
User_芊芊君子1 小时前
【Java】——数组深度解析(从内存原理到高效应用实践)
java·开发语言