什么色彩空间与微信视频黑屏有关!

前言

前一段时间在写小程序功能的时候遇到一个关于视频的奇怪问题:

  1. 播放视频时,有的视频黑屏有的不黑屏
  2. 苹果手机播放不黑屏,安卓手机播放黑屏

不管是格式还是编码格式都跟官网一样。后来团队里的一个哥说,可能跟视频的色彩空间有关系。我听的一愣一愣得(没有听过这个名词)。后来试了把视频从YUV444转为YUV420安卓手机就可以了,这是因为微信小程序的视频播放主要依赖于手机本身的硬件解码,手机不能正确地解析 YUV444 的色彩空间YUV420设备基本都是支持的。最后也是马上去补了一下色彩空间的知识,也是今天的重点。

这个就是在安卓手机上的一个状态,第一个视频是YUV444,第二个视频是YUV420,可以看到第一个视频是可以播放的但是是黑屏的。

正文

什么是色彩空间

色彩空间分为以下几种

  • RGB

RGB相对比较简单。图像的每一个像素都有R. G,B三个值。RGB是我们平常遇到最多的一种图像颜色空间,比如摄像头采集的原始图像就是RGB图像,显示器显示的图像也是RGB 图像。

一般来说,我们的RGB图像,每一个像素都是分别存储R.G.B三个值,且三个值依次排列存储。 比如对于一张8bit位深的RGB图,每个值占用一个字节。这就是为什么是(255,255,255)

比如说

  1. RGB888 是一种颜色编码方式,它使用 24 位(3 字节)来表示一个颜色。在这种编码方式中,红色(R)、绿色(G)和蓝色(B)每种颜色都使用 8 位。
  2. RGB565 是一种颜色编码方式,它使用 16 位(2 字节)来表示一个颜色。在这种编码方式中,红色(R)使用 5 位,绿色(G)使用 6 位,蓝色(B)使用 5 位。

使用图形来表示

  • YUV

YUV 最早主要是用于电视系统与模拟视频领域。现在视频领域基本都是使用 YUV 颜色空间。 跟RGB图像中RGB三个通道都跟色彩信息相关的这种特点不同,YUV图像将亮度信息Y与色彩信息U、V分离开来。如果一张图像没有色度信息U、V,只剩下亮度Y,则依旧是一张图像,只不过是一张黑白图像。

常见的YUV类型

1. YUV 4:4:4(无损的)

在 YUV444 格式中,每个 Y、U 和 V 都有一个独立的样本,这意味着每个像素都有一个完整的 YUV 数据,因此这种格式可以提供最高的图像质量。

2. YUV 4:2:2

两个Y公用一个UV。在 YUV422 格式中,每两个像素共享一个 U 和一个 V 样本,这意味着色度信息的水平分辨率是亮度信息的一半。

3. YUV4:2:0(最常用)

每四个像素共享一个 U 和一个 V 样本,这意味着色度信息的水平和垂直分辨率都是亮度信息的一半。

  • CMYK

CMYK是一种颜色模型,主要用于打印过程中的颜色表示。CMYK代表青色(Cyan)、品红(Magenta)、黄色(Yellow)和黑色(Key)

  • HSV/HSL

HSV代表色相(Hue)、饱和度(Saturation)、明度(Value)。在HSV模型中,色相是颜色的类型(如红、蓝、绿等),饱和度是颜色的纯度(从灰色到纯色),明度是颜色的亮度(从黑色到纯色)。

HSL代表色相(Hue)、饱和度(Saturation)、亮度(Lightness)。在HSL模型中,色相和饱和度的定义与HSV相同,但亮度是颜色的明暗程度(从黑色到白色)。

ffmpeg多媒体处理库

ffmpeg 是一个非常强大的开源多媒体处理库,它包含了许多用于处理音频和视频的工具和库。我们可以使用它来进行格式转换、编解码、流处理、截图、截取等,微信官方也是推荐使用ffmpeg。

下载地址: Releases · BtbN/FFmpeg-Builds (github.com)。 下载解压以后,将目录下的bin目录加入系统变量。

微信提供的教程: 开发辅助 / 音视频处理 (qq.com)

成功以后是这个样子

结语

希望对大家有帮助

相关推荐
Aniugel41 分钟前
单点登录(SSO)系统
前端
鹏多多44 分钟前
移动端H5项目,还需要react-fastclick解决300ms点击延迟吗?
前端·javascript·react.js
serioyaoyao1 小时前
上万级文件一起可视化,怎么办?答案是基于 ParaView 的远程可视化
前端
万少1 小时前
端云一体 一天开发的元服务-奇趣故事匣经验分享
前端·ai编程·harmonyos
WindrunnerMax1 小时前
从零实现富文本编辑器#11-Immutable状态维护与增量渲染
前端·架构·前端框架
不想秃头的程序员1 小时前
Vue3 封装 Axios 实战:从基础到生产级,新手也能秒上手
前端·javascript·面试
程序媛徐师姐1 小时前
Java基于微信小程序的模拟考试系统,附源码+文档说明
java·微信小程序·java模拟考试系统小程序·模拟考试微信小程序·模拟考试系统小程序·模拟考试小程序·java模拟考试小程序
大尚来也1 小时前
微信小程序开发费用全解析:从SaaS到定制的多元选择
微信小程序
数研小生1 小时前
亚马逊商品列表API详解
前端·数据库·python·pandas
你听得到111 小时前
我彻底搞懂了 SSE,原来流式响应效果还能这么玩的?(附 JS/Dart 双端实战)
前端·面试·github