Web多媒体 | 青训营笔记

用户9534627805481
87 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第17天

重点

  • web多媒体历史
  • 编码格式 封装格式 多媒体元素和扩展api 流媒体协议
  • 应用场景

web多媒体

历史

image.png

  • flash 1994-2020

  • 网页三剑客 flash dreamweaver fireworks

  • 播放插件

  • 下坡路 ios不支持flash

  • webp，ogg MP4三种视频形式

  • html5 2014年定稿

基础知识

编码格式

图像基本概念

image.png

视频基本概念

  • 分辨率：每一帧的图像分辨率
  • 帧率：视频单位时间内包含的视频帧的数量
  • 码率：视频单位时间内传输的数据量 kpbs表示 千位每秒

视频帧分类

  • I帧：不依赖于其他帧，如第一帧
  • p帧：依赖于前面一帧，需先解码前面帧
  • B帧：依赖于前面和后面的帧

image.png

右图解码顺序1 2 4 3 6 5

GOP

image.png

  • GOP: group of picture
  • 两个I帧之间的间隔
  • I帧叫关键帧
  • GOP一般间隔2秒、4秒
  • I帧太多 则视频太大，I帧太少则耗时

编码原因

编码原因：为了存储

空间冗余：圈出来的地方一样 没必要全部都存储 image.png

时间冗余：前后90%都一样 只有杆的位置不一样 其他地方没必要重新存储

image.png

编码冗余：只有两个颜色 可以用0 1 表示

image.png

视觉冗余：人类不是所有颜色都看得到，无法感知高频率，像左右两图压缩后没有什么区别，只是把人类看不见的颜色去除

image.png

编码数据处理流程

image.png

  • 预测：帧内预测-I帧，空间冗余；帧间预测-只存储 两个帧之间的像素值的差值，时间冗余
  • 变换：如本来按红 黄 绿颜色方式排序，后面按从大到小
  • 量化：如把直径小于3cm的苹果去掉
  • 熵编码：最后只剩红 率两种颜色的苹果 用0 1 表示

不同编码格式

image.png

  • H-262：数字电视 dvd
  • H-264：PC端 长视频短视频
  • H-265：手机端
  • H-266：VR
  • AOM 开放媒体联盟：谷歌 微软 亚马逊
  • AVA:中国自己研发的

封装格式

image.png

存储音视频、图片、字幕信息的容器

image.png

多媒体元素和扩展api

video

  • video src
  • source src
  • source可以放多个，当一个不行则下一个

image.png

audio

image.png

audio video元素 方法

image.png

image.png

audio video元素 属性

image.png

image.png

audio video元素 事件

image.png

image.png

audio video元素 缺陷

  • 不支持直接播放hls flv等视频格式
  • 视频资源的请求和加载无法通过代码控制：分段加载（节约流量），清晰度无缝切换，精确预加载

媒体源扩展API Media source extension

  • 无插件在web端播放流媒体
  • 支持hls flv MP4等格式
  • 可实现分段加载，清晰度无缝切换，精确预加载，自适应码率等

image.png

image.png

image.png

image.png

image.png

播放流程

MSE播放流程 image.png 播放器播放流程

image.png

MP4 fmp4

mdat:音视频，moov：编码格式

image.png

image.png

流媒体协议

image.png

image.png 流程

image.png

image.png

应用场景

image.png

总结

  • 讲了历史flash->h5 video->MSE
  • 编码格式、封装格式、多媒体元素、流媒体协议
  • 应用场景
avatar
文章
阅读
粉丝