【青训营】- Web 多媒体技术概要什么是Web多媒体技术音视频基础知识浏览器提供的原生多媒体能力 Web多媒体

概要

什么是Web多媒体技术
音视频基础知识
浏览器提供的原生多媒体能力
Web多媒体技术的发展和突破
总结与展望

一、什么是Web多媒体技术

web多媒体技术，分为以下几个方向

多媒体分类

二、音视频基础知识

音视频基础知识

假设 8bit 表示一个子像素，清晰度1280 * 720，帧率 25fps，时长 60s

未压缩视频大小 = 8bit * 3 * 1280 * 720 * 25 * 60 = 3.9GB

压缩比 360 : 1

经过 H264 压缩后视频大小 = 11MB

视频编码解码过程

视频编译

视频压缩

视频压缩

空间/帧内压缩：通过一定的算法，把视频信息冗余度给消除，可以压缩视频文件

时间/帧间压缩：只保存第一张图片信息，对于第二张图片，只保存和第一张图片之间的差异

编码格式发展

编码格式发展

上面是，国际通用标准组织研发的编码器；下面是谷歌公司开发

容器封装格式

容器封装格式

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

<video> 和 <audio> 元素

<!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>