不会才知道并不是所有的mp4视频都能被video标签播放吧？

最新推荐文章于 2024-07-23 16:23:13 发布

奋进的技术人

最新推荐文章于 2024-07-23 16:23:13 发布

阅读量573

点赞数 7

文章标签：音视频网络前端 javascript es6 webpack node

本文链接：https://blog.csdn.net/qq_38229938/article/details/139973788

版权

今天遇到个奇怪的bug，好好一个mp4视频在本地所有设备均可正常播放，但是上传至cos之后插入富文本，发现video标签只能识别出音频，并无视频。排查半天才找出问题所在，特此记录一下！

原因

首先video标签并不能解析所有视频编码格式，它只支持MPEG4，Ogg，WebM 三种视频格式。支持的视频格式及编码格式如下：

但是，video标签对这三种视频格式是有具体要求的

Ogg = 带有 Theora 视频编码 + Vorbis 音频编码
MPEG4 = 带有 H.264 视频编码 + AAC 音频编码
WebM = 带有 VP8 视频编码 + Vorbis 音频编码

MP4格式中H264和MPEG编码格式的区别

MPEG-4编码技术
MPEG－4：MPEG－4是一个适用于低传输速率应用的方案，MPEG-4是在MPEG-1、MPEG-2基础上发展而来，是为了播放流式媒体的高质量视频而专门设计的，它可利用很窄的带度，通过帧重建技术，压缩和传输数据，以求使用最少的数据获得最佳的图像质量。
MPEG-4标准则是基于对象和内容的编码方式，和传统的图像帧编码方式不同，它只处理图像帧与帧之间的差异元素，抛弃相同图像元素，因此大大减少了合成多媒体文件的体积，从而以较小的文件体积同样可得到高清晰的还原图像。换句话说，相同的原始图像，MPEG-4编码标准具有更高的压缩比。

H.264编码技术
H.264是ITU-T国际电联与ISO国际标准化组织联合制定的视频编解码技术标准，h.264是一种高性能的视频编解码技术。
H.264最大的优势是具有很高的数据压缩比率，在同等图像质量的条件下，H.264的压缩比是MPEG-2的2倍以上，是MPEG-4的1.5～2倍。
一个原始文件是102G大小的视频，经过H.264编码后变成了1个G，压缩比竟达到了102:1。因此H.264的低码率技术起到了至关重要的作用，
在用户获得高质量流畅图像的同时，大大节省了下载时间和数据流量，也大大减少了图像存储空间。
H.264是在MPEG-4技术的基础之上建立起来的，其编解码流程主要包括5个部分：帧间和帧内预测(Estimation)、变换(Transform)和反变换、量化(Quantization)和反量化、环路滤波(Loop Filter)、熵编码(Entropy Coding)。

视频监控技术经过多年的发展，并且由于H.264的高压缩性能，目前市场上主流的视频基本采用的是H.264标准。