hmtl5video-thumb-1200x565.jpg

Web 开发者一直想在 Web 中使用音频和视频,HTML5 的 video 标签让开发者可以在网页中轻松添加视频。本文快速回顾视频、直播协议及 HTML5 的 video 标签等基本知识,并提供了许多 HTML5 视频播放器资源。


视频文件


实际上,视频文件像个容器,封装了视频编码文件和音频编码文件,还可以一并封装文字(字幕)、图片等其他档案。Web 视频常使用的格式有:

  • MP4 是一种由动态影像专家组(Moving Picture Experts Group)制定的标准数字多媒体容器格式,包含了音频格式 AAC、MP3 等与影像格式 DivX、XviD、AVC(H.264)等,目前占据视频格式的主流,扩展名为 .mp4。在流媒体应用上,MP4 用于 DASH 流及 HLS 流。
  • Ogg 是由 Xiph.Org 基金会维护的开源数字多媒体容器格式,包含了音频格式 Vorbis 与影像格式 Theora,常见扩展名是 .ogg 或 .ogv。
  • WebM 是由 Google 开发维护的开源数字多媒体容器格式,由 MKV 格式衍生出来,WebM 包含了音频格式 Vorbis 与影像格式 VP8,扩展名是 .webm。

    在 HTML5 出现之前,Adobe 支持的 Flash Video(FLV)是网络上最流行的视频文件格式,采用 H.263 影像编码格式;以及后续的 F4V,采用 H.264 影像编码格式。由于 Flash 停止支持,后文的解说包括如何继续使用这些格式。

提供两个在线 MP4 链接,可供开发测试。

http://clappr.io/highline.mp4
http://vjs.zencdn.net/v/oceans.mp4

视频直播协议


  • RTMP(Real-Time Messaging Protocol),Adobe 支持的基于 TCP 的实时消息协议,用以实时播放 Flash 视频。
  • HLS(HTTP Live Streaming),由苹果公司提出基于 HTTP 的流媒体网络传输协议,是苹果公司 QuickTime X 和 iPhone 软件系统的一部分。HLS 由 .m3u8 和 .ts 组成,.ts 封装了影像与声音,.m3u8 则记录了这些封装文件的位置与设定。前端可借苹果原生库 hls.js 或者 video.js 解析实现。
  • HTTP-FLV,将音视频数据封装成 FLV,然后通过 HTTP 协议传输给客户端。好像是 RTMP 和 HLS的集合。前端可借 Bilibili 开源的 flv.js 或者推荐使用的 mpegts.js 解析实现。
  • DASH(Dynamic Adaptive Streaming over HTTP),基于 HTTP 的自适应比特率流技术,是由 MPEG 开发的直播协议,因此又称为 MPEG-DASH。实现原理类似于 HLS,前端可借 dash.js 解析实现。

2022-06-14 145306.png
流媒体协议 RTMP、HLS、HTTP-FLV 简单对比

487214581-ffa5023f172d30bf_fix732.jpg
另一份常见流媒体协议对比图(via

由于 Flash 停止支持,以上 FLV(以及 F4V)、RTMP 一般不再建议在 HTML 中使用;但由于 HTTP-FLV 协议的存在,FLV 将继续存活,并且也是以 FLV 格式保存视频的旧网站快速改造代码的最优方案。

视频解析库

如果某些浏览器不支持某些视频格式或者协议,需要用到第三方库来解决,以帮助浏览器播放这些影片。这些库是整合 JavaScript 与 MSE API 撰写的。使用这些库的方法通常是:(1)引入库,(2)建立物件并与 video 绑定。

  • hls.js,苹果原生 HLS 播放器;
  • dash.js,MPEG DASH 的参考客户端实现:
  • flv.js,Bilibili 开源 HTTP-FLV 解析库。


HTML5 是 HTML 最新的修订版本,2014 年 10 月由万维网联盟(W3C)完成标准制定。HTML5 的设计目的是为了在移动设备上支持多媒体。

HTML5 还提供了不少网页媒体扩展的 API ,称为 Media Source Extensions(MSE)。MSE 借用 JavaScript(最终形成很多的库,如 video.js)去扩充 HTMLMediaElement(

HTML5 中

<video controls>
    <source src="MP4 链接" type="video/mp4">
    <source src="Ogg 链接" type="video/ogg">
    <source src="WebM 链接" type="video/webm">
您的浏览器不支持 video 标签。
</video>

2022-06-14 094402.png

完整内容还需查阅 W3C 关于 HTML5 的标准,实际上可以浏览 HTML5 菜鸟教程

由于各种浏览器对 HTML 标签的支持不同,通常认为,在 HTML 中播放视频最好的解决方法是 HTML5(<video>)+ <object> + <embed>


自定义样式


各浏览器预设 HTML 的样式不同,可以引入开放的 CSS 框架来统一页面样式。但这些框架对页面中的播放器样式不作修改,即 HTML5 原生视频播放器在不同浏览器中表现各不一样,还需要单独引入播放器插件,或者自行定义样式。

native-video-controls.jpg
不同浏览器的原生浏览器视频控件


第三方播放器


  • sewise-player,HTML5 视频播放器
  • clappr,一个可扩展的网络媒体播放器
  • plyr,一个简单的 HTML5、YouTube 和 Vimeo 播放器
  • Dplayer,好可爱的 HTML5 弹幕视频播放器
  • xgplayer,带有解析器的 HTML5 视频播放器
  • video-react,使用 React 库构建的网络视频播放器
  • react-player,用于播放各种 URL 的 React 组件
  • Video.js,最流行的开源 HTML5 播放器框架
  • JW Player,世界上最快的 HTML5 播放器,商业版
  • Flowplayer,在线视频播放器和平台解决方案

如果没有特殊指定,您可以直接使用 video.js,它非常强大,还有着众多扩展性插件。如果您是研究僧,不妨自己从零写一个 Web 视频播放器。

在带宽和网页技术足够支持流媒体传输和播放以前,传统的(通常是离线的)媒体播放器产品市场非常繁荣,一个解码能力强、能兼容各种常见容器格式的全能播放器,成为了时代的刚需,知名的就有 Windows Media Player、Realplayer、QuickTime、VLC media player、KMPlayer、Potplayer、Winamp、foobar2000 等,Potplayer 和 foobar2000 仍是活跃的桌面媒体播放器软件。

参考示例


最后提供两个实现案例,使用 Three.js + Video.js 播放全景视频的 demo,以及使用 Valiant360(WebGL JS)播放全景照片和视频的 demo

👍

本文由 CulmartPlay 整理发布,参考 CC-BY-SA 3.0 协议共享,欢迎转载、引用或改编。
感谢您的支持,以共同推动STEM公益教育!

楼主残忍的关闭了评论