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"
相关推荐
橘猫云计算机设计2 分钟前
基于Springboot的自习室预约系统的设计与实现(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·毕业设计
Senar5 分钟前
如何判断浏览器是否开启硬件加速
前端·javascript·数据可视化
HtwHUAT28 分钟前
实验四 Java图形界面与事件处理
开发语言·前端·python
利刃之灵29 分钟前
01-初识前端
前端
codingandsleeping34 分钟前
一个简易版无缝轮播图的实现思路
前端·javascript·css
秋书一叶37 分钟前
SpringBoot项目打包为window安装包
java·spring boot·后端
天天扭码37 分钟前
一分钟解决 | 高频面试算法题——最大子数组之和
前端·算法·面试
碎梦归途41 分钟前
23种设计模式-结构型模式之外观模式(Java版本)
java·开发语言·jvm·设计模式·intellij-idea·外观模式
极客先躯1 小时前
高级java每日一道面试题-2025年4月13日-微服务篇[Nacos篇]-Nacos如何处理网络分区情况下的服务可用性问题?
java·服务器·网络·微服务·nacos·高级面试
全宝1 小时前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium