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

写在前面

近几年抖音，快手，B站等音视频APP走进千家万户，丰富我们的娱乐生活，音视频技术的发展和学习也掀起来一波新的热潮，在业务需求的推动下，Web产品的音视频技术也是得到了很大的发展和突破。对于很多人来说，web多媒体最直观的我想就是：看某个视频网站，结果发现视频下载不了。这时候拿出你自以为豪的「抓包技术」，结果发现一堆ts文件。这篇文章，就是揭开web多媒体神秘的面纱。

音视频基础知识

假设8bit表示一个子像素，清晰度为1280720，频率25fps,时长60s,未压缩视频大小=8bit312807202560=3.9GB,经过H264压缩后视频大小为11MB。

具体来说：我们平时的三原色「红绿蓝」分别取值范围从0~255一共有256几2^8种结果，然而所有的rgb则有2^24种

浏览器提供的原生多媒体能力

MDN: The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.

H5提供了video标签，众多新的媒体技术使得原本的王者flash逐步退出历史舞台。除了少部分的游戏会使用flash以外，很多web的flash应用逐渐被取代。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多媒体能力</title>
</head>

<body>
    <video autoplay controls width="600" height="600">
        <source src="video.mp4">
    </video>
    <audio controls>
        <source src="audio.mp3">
    </audio>
</body>

</html>

从而支持

请求音视频资源，然后对音视频资源进行解码，渲染播放
支持视频格式：mp4、mp3

而和元素缺陷有比如说

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

媒体源扩展API(Media Source Extensions)

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

我们平时所熟知的视频网站都需要自研播放器

流媒体协议

HLS全称是HTTP live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛应用于视频点播和直播领域。

应用场景

总结展望

发现现在很多前端在研究serverless，这是往后，那么往前，可能就是webgl、媒体技术、webassembly等，例如webgl，我们熟知的前端AI、VR、AR、游戏等都离不开它。光shader就足够复杂，它可以用来做很多高级的特效、动画等可视化的东西，涉及到程序语言知识、数学知识、图形学知识，甚至需要一定审美。所以，学无止境，前端技术的天花板一直就很高。

深入浅出web多媒体｜青训营笔记