一、什么是video codec?

从字面意思来理解,codec是编码和解码的缩写。所以思考下为什么视频需要编码呢?
最原始的电影通过每秒展示24胶片来达到电影的效果。现在的视频只是把胶片换成了数字化的图片。
未经压缩的视频的数据量太大了,我们有必要进行很多压缩处理来存储视频,就更不用说通过网络传输视频的时候了。想象一下我们需要多少数据来存储未经压缩的视频:
  • 全色彩的高清视频(1920x1080)每一帧为 8,294,400 字节。
  • 按照典型的每秒 30 帧的传播速度,高清视频每秒钟会占用 248,832,000 字节(约 249 MB)。
  • 一分钟的高清视频将需要 14.93 GB 的存储空间。
  • 一个相当典型的 30 分钟视频会议将需要约 447.9 GB 的存储空间,而 2 小时的电影则需要将近 1.79 TB(也就是 1790 GB) 的存储空间。
不仅仅是需要的存储空间很大的问题,以 249MB 每秒的速度传输这样的未压缩的视频所需要的网络带宽也很大(不包括音频和开销)。这就是为什么我们需要视频编解码器。就像音频编解码器对声音数据所做的处理一样,视频编解码器会压缩视频数据并将其编码为一种格式,以后我们可以对其进行解码,播放或者编辑。

二、video codec是如何工作的

底层的编解码原理较为复杂,不展开说,总体上video codec主要通过以下步骤进行:

先是我们计算过没有经过编码压缩的视频需要极大的带宽,所以我们必须进行编码。后来又说道编码的各个过程,输入的原始YUV进来,采用帧类型分析得到IDR、I、P、B类型,然后采用帧内/帧间预测+块划分得到残差,再采用变换+量化进行进一步压缩,接着采用滤波去除方块效应,然后采用熵编码将像素值转换为二进制流进一步压缩,输出压缩后可传输的码流。

最后和音频编码出来的码流一起封装成我们常见的mp4等格式。

三、常用的video codec格式和视频包装格式

对常见的音视频格式,如MP3, MP4 和 WebM叫做包装格式。用来定义音频和视频主干在媒体中如何存储

随着专用硬件的出现,视频编码和解码的性能可以大大提高。

为此,我们的电视、手机、电脑甚至游戏机中的芯片都在硬件层面支持一组固定的编解码器。

使用硬件加速可以高效的进行编码和解码。

四、实际业务中对video codec的使用

视频课程作为职教业务的重要载体,已经在上线并运行好几个年头了,在这中间无论是PC前台还是H5前台或者APP内嵌,都遇到了各式各样的视频播放问题。尤其是在移动端,播放视频的硬件设备五花八门,无论软件版本还是硬件版本跨度相对较大。这为视频的兼容提出了一定的挑战。

一些遇到过的播放问题汇总

1,

运营同学反馈,该课程在手机浏览器正常播放,在企训助手APP中不能正常播放。error4是因为不能解码抛出的错误。根据第一部分的内容我们知道,解码其实既依赖硬件又依赖软件。最终定位原因是该嵌入课程的APP选择的视频播放器版本太老,不能正确解码视频。

2,meta20 一直加载  meta 30 p  只有声音 没有画面,苹果手机可以正常播放。

最终定位问题,该视频采用了H265编码器格式,H265编解码效率较高但是硬件支持度不够。最终对该视频使用视频转码软件进行转码后可以正常播放。

综合以上频繁遇到的由于video codec造成的问题,根据用户设备特征统计,决定做两部分工作:

(1)对用户上传的视频进行切片分析,如果是支持度较低的codec格式如H265,进行相应的提示

在WebAssembly尚未成为W3C标准之前,对视频进行切片分析只能在后端进行,如java基于javavc对video codec进行检测,javavc这个包实则是对ffmpeg的包装。市面上大部分视频转码工具也都是基于ffmpeg。

随着WebAssembly 于 2019 年 12 月 5 日成为万维网联盟(W3C)的推荐标准,与 HTML,CSS 和 JavaScript 一起成为 Web 的第四种语言。浏览器端可以借助.wasm文件的强大插件能力进行video codec detect。

业务中选用了 mediainfo.js

This is a JavaScript port of the excellent MediaInfoLib and can run directly in a browser or in Node.js. It is transpiled from C++ source code using Emscripten.

依赖MediaInfoModule.wasm二进制文件

下面是核心的video codec检测代码

对比老业务中获取视频的信息方式,老的方式必须先对视频进行播放插入video标签才能实现,使用mediainfo.js显然更加简便和直接。

(2)对用户上传的视频进行统一转码,如统一转码为H264

视频的转码在实际的业务中是在视频上传之后,后台进行的异步转码,转码的同时会根据码率生成多种视频文件,其实对应着我们平常看视频时使用的清晰度切换功能,每切换一次清晰度其实是选择了一个不同码率的视频文件进行播放。

最后来看看常用的视频软件使用到的视频编码格式。

A,抖音

随便下载一条抖音的视频,使用mediainfo.js进行分析,结果如下

可以清楚的看到抖音使用的AVC即H264进行视频编码和我们业务是一致的。

B,YouTube

由于H265高昂的版权费,它并没有像H264一样得到普遍的支持。也正是由此,YouTube决定开发一款免费开源的高效视频编解码标准叫做VP9。2016年YouTube推出高分辨率的4K视频和它的android tv都使用了此codec。随后各种只能设备,浏览器和电视从2017开始也支持了VP9。如现在流行的华为手机。

好了,video codec相关的内容就讲到这里。但其实职教业务的前台视频播放还有很大的想象优化空间,例如:使用流播放形式替换现在的文件播放等。这个以后优化了再进行分享。3Q~

参考链接:

MDN Video Codecs

mediainfo.js

什么是video codec? video codec在实际业务的应用。相关推荐

  1. html的基本网页界面的画法video src=video/myz.mp4 controls=controls/video

    1.内容: html是一种基于web的超文本语言,也是一种标记语言.她允许创建链接.添加图片.添加音视频.输入表格.框架等的功能.可以将之存为文本文件,浏览器可以读取和显示. 2.操作环境 编辑器:s ...

  2. ALSA DAPM创建codec到codec的dai连接

    Creating codec to codec dai link for ALSA dapm 大多数情况下,音频流始终从CPU到编解码器,因此你的系统将如下所示:--------- --------- ...

  3. 视频转换——Video to Video Converter

    PSP.iPhone.HTC.XBOX.PS3--你有多少设备?如果你拥有超过2个以上的视频播放设备,那你一定会对视频格式这个问题感到无比头疼.这个软件最强大的莫过于众多的设备模板,你几乎可以在里面找 ...

  4. 【HTML5 video】video标签的部分属性解析

    转自:http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Th ...

  5. [Video Transformer] Video Swin Transformer

    代码: GitHub - SwinTransformer/Video-Swin-Transformer: This is an official implementation for "Vi ...

  6. video → character video

    效果 原视频 字符视频 实现方式 使用 canvas 作为绘制容器,截取视频每一帧,逐行逐列扫描并转换为对应的灰度字符 通过 npm 安装 已上传 npm : npm i video-characte ...

  7. What’s The Difference Between A Codec, Container And Video Format?

    What's The Difference Between A Codec,Container And Video Format? http://www.ghacks.net/2011/09/07/w ...

  8. js修改video的source_利用 javascript MediaSource 将 HTML video标签的src转成加载blob

    目前很多视频网站都是采用video标签形式,src是blob://http开头,效果如下 实现方式,用用H5的MediaSource方法 blob var video = document.query ...

  9. Video 视频播放防作弊和禁止下载

    1.实现效果 - 查看源码 实现视频可播放不能下载,禁止右键下载.F12源码打开链接下载 实现只在当前窗口播放,切换窗口.窗口最小化.窗口被遮挡停止播放,恢复后继续播放 在线demo:缓存完再播放 . ...

最新文章

  1. 2018 AI产业投融资分析:热钱涌向何处,谁的“寒冬”将至?
  2. 解读《这就是 OKR》 | OKR 的四大价值
  3. flowable 配置自定义表单_Flowable用代码自定义流程
  4. linux mysql 数据文件,Linux下修改MySQL数据库数据文件路径的步骤
  5. sourceTree
  6. 面试:Spring Boot 中的条件注解底层是如何实现的?
  7. 码云一个仓库只有一个项目吗_gitee码云完整使用教程(部署与克隆)
  8. Java基础之HashMap流程分析
  9. 服务器网盘系统怎么装,云服务器上怎么安装操作系统
  10. C# 定义了 7 种变量类别:静态变量、实例变量、数组元素、值参数、引用参数、输出参数和局部变量
  11. 华为云EI人脸识别接口初探
  12. uni app 调用网络打印机_uni-app封装一个request请求
  13. javascript-函数声明和函数表达式-call-apply
  14. php 接口并发测试的方法
  15. 工具:数据库设计ER图
  16. 无线遥控433MHz编码发射
  17. 【算法】泽勒的一致性
  18. 脱壳(中) 脱壳的方法
  19. moss下载_无法为增值税MOSS混乱提供“简单的技术解决方案”
  20. 华为发布八核处理器Kirin 920

热门文章

  1. 小白的渗透之旅1-DVWA环境搭建
  2. python绘制中国_使用python绘制中国地图
  3. php.ini 详解
  4. R 线性模型 检验异常观测值
  5. 跨境电商卖家应该掌握的9种电子邮件创意营销方法
  6. 运动会加油稿计算机学院150字,大学运动会经典加油稿150字左右2018
  7. mysql怎么看表的结构_mysql查看表的结构
  8. Mongodb的Min key和Max key是能查找最大最小值的新功能吗?
  9. 交友H5盲盒源码PHP开源版
  10. Optisystem7.0安装教程(Win10系统)