1在线HTML编辑器
如果你正在一台你不能创建文件的设备上作业，那么你需要在在线编程工具上运行（大多数）代码示例，如 JSBin 或 Glitch
离线的推荐下载HbuilderX
2学习网站
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding
https://zhuanlan.zhihu.com/p/421018189
https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Video_codecs
下边会介绍一些常用编解码方式，以及浏览器对编解码格式的支持；
储备知识：
1 影响编码视频大小和质量的基本因素有两组：源视频格式和内容的细节，以及编码视频时使用的编解码器的特性和配置。
2 所有编解码器都有其优点和缺点。有些编码器在处理特定的形状和图案会出现问题，有的不擅长处理锐利的边缘，有的在黑暗区域往往会丢失细节，不同的编码器都有可能出现各种各样的问题，这一切是由编码器底层的算法和数学理论决定的。
AV1
AOMedia Video 1（AV1）编解码器是由 Alliance for Open Media 专门为互联网视频设计的开放格式。它实现了比 VP9 和 H.265/HEVC 更高的数据压缩率，比 AVC 高出多达 50%。AV1 完全免版税，专为 <video> 元素和 WebRTC 使用而设计。
目前 AV1 的主要缺点是它非常新，并且大多数的浏览器还未完全支持该编码方式。此外，编码器和解码器仍在针对性能进行优化，硬件编码器和解码器仍主要处于开发阶段而不是生产阶段。因此，将视频编码为 AV1 格式需要很长时间，因为所有工作都是在软件中完成的。
AVC (H.264)
MPEG-4 规范套件的高级视频编码（AVC）标准由相同的 ITU H.264 规范和 MPEG-4 Part 10 规范指定。它是一种基于运动补偿的编解码器，如今广泛用于各种媒体，包括广播电视、RTP (en-US) 视频会议以及蓝光光盘的视频编解码器。
AVC 还具有特殊功能，例如支持同一场景的多个视图（多视图视频编码），它允许制作立体视频等。
WebRTC 的非 Web 浏览器实现（任何不包括 JavaScript API 的实现）都_需要_支持 AVC 作为 WebRTC 调用中的编解码器。虽然 Web 浏览器不需要这样做，但有些需要这样做。
在 Web 浏览器的 HTML 内容中，AVC 具有广泛的兼容性，并且许多平台支持 AVC 媒体的硬件编码和解码。但是，在你的项目中选择使用 AVC 之前，请注意其许可要求！
H.263
ITU 的 H.263 编解码器主要设计用于低带宽情况。特别是，它的重点是 PSTN（公共交换电话网络）、RTSP (en-US) 和 SIP（基于 IP 的视频会议）系统上的视频会议。尽管针对低带宽网络进行了优化，但它相当占用 CPU，并且可能无法在低端计算机上充分执行。数据格式类似于 MPEG-4 Part 2。
H.263 已被 H.264 取代，因此被视为一种传统媒体格式，你通常应该尽可能避免使用。在新项目中使用 H.263 的唯一真正原因是，如果你需要支持非常旧的设备，而 H.263 是你的最佳选择。
H.263 是一种专有格式，专利 由包括 Telenor、富士通在内的许多组织和公司持有、摩托罗拉、三星、日立、宝利通、高通等。要使用 H.263，你有法律义务获得相应的许可证。
HEVC (H.265)
高效视频编码（HEVC）编解码器由 ITU 的 H.265 以及 MPEG-H 第 2 部分（MPEG-4 仍在开发中的后续版本）。HEVC 旨在支持对包括超高分辨率（包括 8K 视频）在内的视频进行高效编码和解码，其结构专为让软件利用现代处理器而设计。从理论上讲，HEVC 可以达到 AVC 一半的压缩文件大小，但图像质量相当。
HEVC 是一种专有格式，受多项专利保护。许可由 MPEG LA 管理；费用向开发者收取，而不是向内容生产者和发行商收取。在决定是否在你的应用或网站中使用 HEVC 之前，请务必查看最新的许可条款和要求！
VP8
Video Processor 8（VP8）编解码器最初由 On2 Technologies 创建。在收购 On2 之后，Google 发布了 VP8 作为一种开放且免版税的视频格式，并承诺不强制执行相关专利。在质量和压缩率方面，VP8 可与 AVC 媲美。
如果浏览器支持，VP8 允许带有 Alpha 通道的视频，允许视频播放的背景可以通过视频看到，达到每个像素的 Alpha 分量指定的程度。
HTML 内容中的 VP8 有很好的浏览器支持，尤其是在 WebM 文件中。这使得 VP8 成为你的内容的理想候选者，尽管如果你可以使用 VP9，它是一个更好的选择。Web 浏览器是需要支持 WebRTC 的 VP8，但并非所有这样做的浏览器都支持 HTML 音频和视频元素。开放且免版税和任何其他许可要求
VP9
Video Processor 9（VP9）是 Google 开发的旧 VP8 标准的继承者。与 VP8 一样，VP9 是完全开放且免版税的。其编解码性能与 AVC 相当或略快，但质量更好。VP9 的编码视频质量在相似比特率下可与 HEVC 相媲美。
VP9 被浏览器广泛支持，并且编解码器的硬件实现相当普遍。VP9 是 WebM 规定的两个视频编解码器之一（另一个是 VP8）。但请注意，Safari 对 WebM 和 VP9 的支持仅在 14.1 版中引入，因此如果你选择使用 VP9，请考虑为 iPhone、iPad 和 Mac 用户提供备用格式，例如 AVC 或 HEVC。
