视频格式大变革，H5再添三强

前端

2023-02-03 10:16:43

H5 video标签的崛起与新兴视频格式的挑战

在互联网飞速发展的时代，视频内容已成为网络上的宠儿。为了让用户能在浏览器中直接播放视频，HTML5 引入了 video 标签，它支持 MP4、OGG、WebM 等多种格式。

然而，随着视频格式的不断更新，video 标签也面临着新的考验。FLV、FMP4、WebRTC 等新兴格式因其独特的编码方式或加密措施，无法直接通过 video 标签的 src 属性进行播放。

认识新兴视频格式：FLV、FMP4、WebRTC

FLV：小而灵活的网络视频王者

FLV（Flash Video）是一种广泛用于网络视频播放的格式。它体积小、加载速度快，因此深受人们喜爱。

FMP4：强大安全的流媒体视频新星

FMP4（也称 MPEG-4 Part 14）是一种基于 MP4 格式的流媒体视频格式。它兼容性更强，安全性更高，受到越来越多的关注。

WebRTC：实时视频通信的新标准

WebRTC（Web Real-Time Communication）是一种用于实时视频通信的开放标准。它允许浏览器之间直接进行视频流传输，具有低延迟、高画质的优势。

突破限制：在 H5 中播放新兴视频格式

要让新兴视频格式在 H5 中播放，我们需要借助一些特殊技术或第三方库。以下两种方案可供选择：

MediaSource API：灵活处理媒体流

MediaSource API 是 HTML5 中用于处理媒体流的 API。它允许我们将 FLV、FMP4 和 WebRTC 等格式的视频流数据动态添加到 video 元素中，实现视频播放。

第三方库：快速便捷的播放方案

目前，video.js、jwplayer 等第三方库可以帮助我们在 H5 中轻松播放新兴视频格式。这些库提供了更丰富的功能和更友好的用户界面，大大简化了视频播放的实现。

代码示例：使用 video.js 播放 FLV 视频

<!DOCTYPE html>
<html>
<head>

  <script src="video.js"></script>
</head>
<body>
  <video id="player" class="video-js vjs-default-skin" controls>
    <source src="path/to/your.flv" type="video/x-flv" />
  </video>
  <script>
    var player = videojs('player');
  </script>
</body>
</html>