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

前言

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

  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)

成功以后是这个样子

结语

希望对大家有帮助

相关推荐
拉不动的猪2 分钟前
# 关于初学者对于JS异步编程十大误区
前端·javascript·面试
玖釉-7 分钟前
解决PowerShell执行策略导致的npm脚本无法运行问题
前端·npm·node.js
Larcher40 分钟前
新手也能学会,100行代码玩AI LOGO
前端·llm·html
徐子颐1 小时前
从 Vibe Coding 到 Agent Coding:Cursor 2.0 开启下一代 AI 开发范式
前端
小月鸭1 小时前
如何理解HTML语义化
前端·html
jump6801 小时前
url输入到网页展示会发生什么?
前端
诸葛韩信2 小时前
我们需要了解的Web Workers
前端
brzhang2 小时前
我觉得可以试试 TOON —— 一个为 LLM 而生的极致压缩数据格式
前端·后端·架构
yivifu2 小时前
JavaScript Selection API详解
java·前端·javascript
这儿有一堆花2 小时前
告别 Class 组件:拥抱 React Hooks 带来的函数式新范式
前端·javascript·react.js