HTML5关键知识点之网页视频嵌入及视频容器解析

HTML5关键知识点之网页视频嵌入及视频容器解析

在探索HTML5技术的过程中，我发现网页视频嵌入和视频容器相关知识非常有趣且实用。写这篇文章，就是希望能和大家一起深入学习这些知识，共同进步。

一、知识点总结

1. HTML5之前网页嵌入视频的方式：在HTML5之前，网页嵌入视频需借助第三方插件，如QuickTime、RealPlayer或Flash（YouTube使用Flash）。
2. HTML5的元素：HTML5定义了使用元素在网页中嵌入视频的标准方式，但目前该元素尚未被所有浏览器支持。
3. 视频容器格式
   • 概念：“AVI”“MP4”等只是视频容器格式，决定视频存储方式，与存储内容无关。一个视频文件通常包含视频轨道和音频轨道，轨道有关联且可各自包含元数据，容器也可有自身元数据。
   • 常见格式
     • MPEG - 4：扩展名通常为.mp4或.m4v，基于旧的苹果QuickTime容器格式，苹果iTunes影片使用此格式。
     • Flash视频：扩展名通常为.flv，早期是Flash视频唯一支持的容器格式，后来部分版本开始支持MPEG - 4容器格式。
     • Ogg：扩展名通常为.ogv，是开放标准，完全开源且不受专利束缚。Firefox3.5、Chrome 4和Opera10.5等浏览器原生支持，多种操作系统安装相关组件或过滤器后也可播放，VLC播放器在各平台均可播放。
     • WebM：扩展名是.webm，较新，与Matroska类似，专为VP8视频编解码器和Vorbi s音频编解码器设计，将被多个主流浏览器及Flash后续版本支持。
     • 音频视频交错（AVI）：扩展名通常为.avi，由微软发明，但微软官方对其支持不如其他新格式，且对其他视频容器格式特性支持不足。

二、知识点通俗讲解

（一）HTML5之前网页嵌入视频的方式

以前要是想在网页上放个视频，没办法直接放，得找“帮手”，像QuickTime、RealPlayer或者Flash这些第三方插件。就好比你想在房间里挂幅画，但是墙不平整，得先找个东西把墙弄平整才能挂画一样。YouTube用的“帮手”就是Flash。

（二）HTML5的元素

HTML5给我们提供了一个更标准的在网页上放视频的办法，就是用元素。不过现在不是所有浏览器都能很好地支持它，就像新出的一款工具，不是所有地方都能马上用起来一样。

（三）视频容器格式

• 概念：视频容器就像是装视频的“盒子”，它只决定把视频“装”起来的方式，和视频里具体放了什么内容没关系。一个视频文件里一般有视频轨道（没有声音的画面部分）和一个或多个音频轨道（只有声音没有画面），它们之间是有关联的，而且各自还能带着一些“小标签”（元数据），比如视频轨道的画面比例、音频轨道的语言，容器本身也能有“小标签”，像视频标题、封面这些。重点理解容器格式和内容的关系，以及轨道和元数据的概念。
• 常见格式
  • MPEG - 4：它的“盒子”名字一般是.mp4或者.m4v结尾，是从以前苹果的QuickTime容器格式发展来的。现在从iTunes买的影片就用这种“盒子”装。
  • Flash视频：“盒子”名字以.flv结尾，以前Flash视频只能用这种“盒子”，现在有些新版本的Flash也能“装”MPEG - 4格式的视频了。
  • Ogg：“盒子”扩展名是.ogv，它是个很开放的“盒子”，谁都能用，而且没有专利限制。很多主流浏览器像Firefox3.5、Chrome 4和Opera10.5都能直接打开它，在Windows、Mac系统上装些东西也能播放，VLC播放器更是在哪个平台都能播放它里面的视频。
  • WebM：以.webm结尾，是个新“盒子”，和Matroska有点像，是为VP8视频编解码器和Vorbi s音频编解码器专门设计的。以后很多主流浏览器和Flash都会支持它。
  • 音频视频交错（AVI）：“盒子”名字是.avi，是微软做的，但微软现在对它的支持不如对其他新“盒子”好，而且它对现在其他视频“盒子”的一些新特性支持不太够。

三、知识点表格总结

知识点	详情	重点内容
HTML5之前网页嵌入视频的方式	借助第三方插件，如QuickTime、RealPlayer、Flash等	第三方插件的作用及代表插件
HTML5的元素	定义网页嵌入视频的标准方式，目前未被所有浏览器支持	元素的作用及支持现状
视频容器格式	概念：决定视频存储方式，包含视频和音频轨道及元数据 常见格式：MPEG - 4、Flash视频、Ogg、WebM、AVI及其特点	容器格式与内容的关系；各常见格式的特点，如扩展名、相关背景、支持情况等

写作这篇文章花费了我不少精力，希望能帮助大家更好地理解HTML5中网页视频嵌入及视频容器的相关知识。如果觉得文章对你有帮助，恳请大家关注我的博客，点赞并评论。你们的支持是我继续创作的动力，咱们一起在技术学习的道路上不断前行！