前端视频开发介绍

Video 标签

在 HTML5 之前要播放视频需要使用：

Flash 播放器（Adobe）
Windows Media Player（微软）
QuickTime 播放器（苹果公司）
RealPlayer（RealNetworks 公司）

它们通常需要使用插件或特定的媒体播放器来支持不同的视频格式，而 HTML5 的引入为网页中的视频播放提供了更加标准化和无需插件的方法。它支持一系列常见的视频格式，如 MP4、WebM 和 Ogg 等。

HTML5 引入了 <video> 标签作为 HTML 规范的一部分，提供了一种标准化的方式在网页中嵌入和播放视频。<video> 标签是一个容器元素，允许您定义和控制视频播放的各个方面。

以下是 <video> 标签及其属性的简要介绍：

src：该属性指定要播放的视频文件的 URL 或文件路径。通常使用 <source> 元素在 <video> 标签内设置。
controls：当存在该属性时，会显示标准的视频播放控件，例如播放/暂停按钮、音量控制和进度条。
autoplay：当存在该属性时，视频在页面加载时会自动开始播放。
loop：该属性在存在时会使视频无限循环播放。
poster：该属性指定一个图像文件，在视频开始播放之前作为视频缩略图或海报图显示。
width 和 height：这些属性定义了视频播放器的尺寸。您可以将其设置为特定的像素值，或者使用百分比实现响应式设计。
<source>：这是 <video> 标签的可选子元素。它允许您指定具有不同格式或分辨率的多个视频源。浏览器会选择第一个支持的源。<source> 标签有两个重要的属性：src（视频的 URL 或文件路径）和 type（视频文件的 MIME 类型）。
<track>：这是一个可选元素，用于为视频定义字幕、标题或其他文本轨道。它具有诸如 src、kind 和 srclang 的属性，用于指定轨道文件、轨道类型和轨道语言。
<video> 的备用内容：如果浏览器不支持 <video> 标签或指定的任何视频格式，您可以在 <video> 元素内提供备用内容。这些内容将作为不支持的浏览器的后备选项显示。

这些是 <video> 标签在 HTML5 中的一些关键特性和属性。它允许您在网页中嵌入视频并控制视频播放的各个方面，使您更容易创建丰富的多媒体体验。

视频编码

编码主要是想办法压缩视频的大小。

使用帧间编码技术可以去除时间上的冗余信息，具体包括以下几个部分。

运动补偿：运动补偿是通过先前的局部图像来预测、补偿当前的局部图像，它是减少帧序列冗余信息的有效方法。
运动表示：不同区域的图像需要使用不同的运动矢量来描述运动信息。
运动估计：运动估计是从视频序列中抽取运动信息的一整套技术。

使用帧内编码技术可以去除空间上的冗余信息。

对于视频，ISO同样也制定了标准：Motion JPEG即MPEG，MPEG算法是适用于动态视频的压缩算法，它除了对单幅图像进行编码外，还利用图像序列中的相关原则去除冗余，这样可以大大提高视频的压缩比。截至目前，MPEG的版本一直在不断更新中，主要包括这样几个版本：Mpeg1（用于VCD）、Mpeg2（用于 DVD）、Mpeg4 AVC（现在流媒体使用最多的就是它了）。相比较于ISO制定的MPEG的视频压缩标准，ITU-T制定的H.261、 H.262、H.263、H.264一系列视频编码标准是一套单独的体系。其中， H.264集中了以往标准的所有优点，并吸取了以往标准的经验，采用的是简洁设计，这使得它比Mpeg4更容易推广。现在使用最多的就是H.264标准，H.264创造了多参考帧、多块类型、整数变换、帧内预测等新的压缩技术，使用了更精细的分像素运动矢量（1/4、1/8）和新一代的环路滤波器，这使得压缩性能得到大大提高，系统也变得更加完善

在H264中，三种类型的帧数据分别为

IPB帧

视频压缩中，每帧都代表着一幅静止的图像。而在进行实际压缩时，会采取各种算法以减少数据的容量，其中IPB帧就是最常见的一种。

I帧：帧内编码帧（intra picture），I帧通常是每个GOP（MPEG所使用的一种视频压缩技术）的第一个帧，经过适度地压缩，作为随机访问的参考点，可以当成静态图像。I帧可以看作一个图像经过压缩后的产物，I帧压缩可以得到6：1的压缩比而不会产生任何可觉察的模糊现象。I帧压缩可去掉视频的空间冗余信息，下面即将介绍的P帧和B帧是为了去掉时间冗余信息。
P帧：前向预测编码帧（predictive-frame），通过将图像序列中前面已编码帧的时间冗余信息充分去除来压缩传输数据量的编码图像，也称为预测帧。P帧表示的是这一帧跟之前的一个I帧（或P帧）的差别 ，解码时需要用之前缓存的画面叠加上本帧定义的差别，生成最终画面。（也就是差别帧，P帧没有完整画面数据，只有与前一帧的画面差别的数据）
B帧：双向预测内插编码帧（bi-directional interpolated prediction frame），以前面的I或P帧和后面的P帧为参考帧,"找出"B帧"某点"的预测值和两个运动矢量,并取预测差值和运动矢量传送。接收端根据运动矢量在两个参考帧中"找出(算出)"预测值并与差值求和,得到B帧"某点"样值,从而可得到完整的B帧。换言之，要解码B帧，不仅要取得之前的缓存画面，还要解码之后的画面，通过前后画面的与本帧数据的叠加取得最终的画面。B帧压缩率高，但是解码时CPU的负荷会比较大。

基于上面的定义，我们可以从解码的角度来理解IPB帧。 I帧自身可以通过视频解压算法解压成一张单独的完整视频画面，所以I帧去掉的是视频帧在空间维度上的冗余信息。 P帧需要参考其前面的一个I帧或者P帧来解码成一张完整的视频画面。 B帧则需要参考其前一个I帧或者P帧及其后面的一个P帧来生成一张完整的视频画面，所以P帧与B帧去掉的是视频帧在时间维度上的冗余信息。

以一个经典的例子去讲解这个知识点可能会比较直观一点。如图

I帧记录的就是完整的信息，这里不用多说。看一下I帧与P帧的关系。首先我们看原始的图片，P帧比I帧多了一个小方块。所以P帧最后的存储的就只是一个小方块的信息。可以理解为I帧与P帧组合起来就得到原始的图片了。

同理，来看一下B帧。可以看到B帧与I帧，p帧的组合才会形成原始图片。

视频格式

1. FLV - Flash Video

FLV 格式最初由 Adobe Flash Player 使用，并在过去被广泛应用于网络视频播放。然而，随着 HTML5 的发展，浏览器开始逐渐不再依赖 Flash 插件来播放视频，而是采用原生的 HTML5 视频播放功能。这导致了对 FLV 格式的支持程度下降。FLV（Flash Video）格式并不是

HTML5 标准所支持的格式之一，因此直接在 <video> 元素中使用 FLV 格式的视频可能无法播放。

要在 HTML5 中播放 FLV 格式的视频，需要将 FLV 文件转换为 HTML5 支持的格式，如 MP4 或 WebM。有许多视频转换工具和服务可供使用，可以将 FLV 文件转换为兼容的格式，从而在 <video> 元素中进行播放。

2. Mp4

MP4 是一种常见的数字多媒体容器格式，全称为 "MPEG-4 Part 14"。

MP4 格式被广泛用于存储视频、音频和字幕等多媒体数据，并且可以通过不同的编码方式进行压缩。它具有良好的跨平台兼容性，可以在各种设备和操作系统上播放，包括计算机、移动设备、智能电视和流媒体平台。

MP4 格式支持多种音频和视频编码格式，例如 H.264（也称为 AVC）、AAC、MPEG-4、MP3 等。这些编码格式可以提供高质量的视频压缩，以便在较小的文件大小下保持良好的视听效果。此外，MP4 格式还支持字幕轨道、章节标记、元数据等扩展功能。

3. WebM

WebM 是一种开放的多媒体容器格式。它由 Google 开发，并采用了开放的视频编码 VP8 和开放的音频编码 Vorbis。

WebM 文件可以包含视频轨道、音频轨道和字幕轨道等多种媒体数据。WebM 格式还支持透明度（alpha）通道，使其成为创建具有透明背景的视频动画的理想选择。

4. Ogg

Ogg 是一种开放的多媒体容器格式，用于存储音频、视频、文本和元数据等多种媒体数据。它是由 Xiph.Org 基金会开发的，旨在提供一种免费、开放且高效的媒体传输格式。

5. M3U8

M3U8是一种常见的流媒体格式，主要以文件列表的形式存在，既支持直播又支持点播。它是一种UTF-8编码格式的M3U文件，用于记录索引的纯文本文件。打开M3U8文件时，播放软件并不是直接播放它，而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。

M3U：MP3 URL 或 Moving Picture Experts Group Audio Layer 3 Uniform Resource Locator

最初，M3U 是为了指定 MP3 音频文件的播放列表而创建的，因此得名 "MP3 URL"。然而，随着时间的推移，M3U 也被广泛应用于其他音频格式，如 AAC、FLAC 等。

视频协议

1. HLS

HLS（HTTP Live Streaming）是一种用于实时流媒体传输的协议。它由苹果公司开发，并成为了一种广泛采用的流媒体传输标准。HLS 使用 HTTP 协议来分段传输媒体内容，使得视频和音频可以在互联网上进行实时传输和播放。

HLS 的工作原理如下：

媒体内容首先被切分成短小的媒体段（通常几秒钟的长度）。
一个包含媒体段信息的索引文件（称为播放列表）被创建并存储在服务器上。
客户端通过 HTTP 请求播放列表文件，获取其中的媒体段信息。
客户端选择要下载和播放的媒体段，并通过 HTTP 请求下载媒体段的数据。
下载的媒体段在客户端进行缓存，并通过播放器进行解码和播放。
当一个媒体段播放完毕，客户端请求并下载下一个媒体段，以保持流畅的播放。

HLS 具有以下特点和优势：

适应性比特率（ABR）：HLS 支持根据网络条件自动调整视频的比特率，以适应不同的带宽和设备能力。这使得在不同网络环境下的流畅播放成为可能。
容错性：由于媒体内容被切分成小的媒体段，即使在网络传输中出现中断或丢失数据包的情况下，只影响当前的媒体段，而不会影响整个流媒体的播放。
平台兼容性：HLS 可以在各种设备和平台上进行播放，包括计算机、移动设备和智能电视等。
安全性：HLS 支持基于加密的媒体传输，可以保护媒体内容的安全性和防止未经授权的访问。

HLS 在在线视频流媒体、直播、视频点播等场景中被广泛应用，特别是在移动设备上的视频播放和实时直播方面。它提供了一种灵活、可靠和高质量的流媒体传输解决方案。

2. RTSP

RTSP（Real-Time Streaming Protocol）是一种用于流媒体传输的网络协议。它旨在支持实时的音频和视频传输，允许客户端通过网络与流媒体服务器进行交互，控制和接收流媒体数据。

RTSP 的工作原理如下：

客户端与流媒体服务器建立 RTSP 连接。
客户端发送 RTSP 命令给服务器，如播放、暂停、停止等，以控制媒体的传输和操作。
服务器响应客户端的请求，并提供相应的状态信息和数据。
客户端根据服务器的响应，接收媒体数据，并进行解码和播放。

RTSP 主要用于控制媒体的传输和操作，并不直接传输媒体数据。实际的音频和视频数据通常使用 RTP（Real-time Transport Protocol）或类似的协议进行传输。RTSP 与 RTP 通常结合使用，以实现完整的实时流媒体传输。

RTSP 具有以下特点和优势：

实时性：RTSP 允许实时的音频和视频传输，支持实时流媒体播放和直播。
灵活性：RTSP 提供了丰富的控制命令和功能，允许客户端进行媒体的控制、操作和交互。
可扩展性：RTSP 可以与其他协议和技术结合使用，如 RTP、RTCP（Real-Time Control Protocol）、SDP（Session Description Protocol）等，以实现更强大和复杂的流媒体应用。
平台兼容性：RTSP 可以在各种设备和平台上进行实现和使用，包括计算机、移动设备和智能电视等。

RTSP 在流媒体传输、视频监控、视频会议等领域被广泛应用。它提供了一种标准化和通用的方式来控制和传输实时的音频和视频数据，使得流媒体应用具备了更高的灵活性和可操作性。

3. RTMP

RTMP（Real-Time Messaging Protocol）是一种用于实时流媒体传输的协议。它最初由Adobe开发，用于在Flash平台上传输音频、视频和数据。RTMP在实时流媒体领域得到广泛应用，尤其是在视频直播和互动性应用中。

RTMP的工作原理如下：

客户端与流媒体服务器建立RTMP连接。
客户端通过RTMP发送音频、视频和其他数据流给服务器，或从服务器接收数据流。
服务器接收到数据流后，可以将其分发给其他客户端进行播放或处理。
客户端可以通过RTMP发送控制命令给服务器，如播放、暂停、停止等，以控制媒体的传输和操作。

RTMP支持多种音频和视频编码格式，如AAC（Advanced Audio Coding）和H.264。它使用TCP作为传输层协议，提供可靠的数据传输，可以在不同网络环境下实现稳定的流媒体传输。

RTMP具有以下特点和优势：

低延迟：RTMP可以实现低延迟的实时传输，适用于实时直播和互动性应用。
动态自适应比特率：RTMP支持根据网络条件自动调整视频的比特率，以适应不同的带宽和设备能力。
协议扩展性：RTMP具有可扩展的架构，可以与其他协议和技术结合使用，如HTTP、WebSocket等。
平台兼容性：RTMP可以在多个平台上实现和使用，包括桌面计算机、移动设备和智能电视等。

然而，随着HTML5的发展，基于Web标准的流媒体传输方案，如HLS（HTTP Live Streaming）和DASH（Dynamic Adaptive Streaming over HTTP），逐渐取代了RTMP在流媒体领域的地位。这些新的协议具有更好的兼容性和广泛的支持，特别适用于移动设备和多平台环境。因此，RTMP在一些场景中逐渐被替代，但仍然在某些特定的应用中使用。

4. DASH

DASH（Dynamic Adaptive Streaming over HTTP）是一种流媒体传输协议，它是基于HTTP的动态自适应流媒体传输的标准化解决方案之一。DASH旨在提供高质量的流媒体传输，适应不同的网络条件和客户端设备。

DASH的工作原理如下：

流媒体服务器将原始音视频内容切分成一系列短小的分段（segments）。
客户端通过HTTP请求获取这些分段，并根据当前的网络状况和设备能力选择合适的分段进行下载和播放。
客户端可以通过在HTTP请求中包含参数来指定所需的分段质量、码率等信息，以实现动态自适应。
客户端根据下载的分段进行解码和播放，并在需要时请求下一个适合的分段。

DASH的特点和优势包括：

动态自适应：DASH可以根据网络带宽和设备能力动态调整视频的质量和码率，以提供最佳的用户体验。
兼容性：DASH基于HTTP标准，可以在现有的Web基础设施上实现，无需额外的插件或特定的客户端软件。
网络友好：DASH使用标准的HTTP协议，能够利用现有的网络基础设施，支持内容分发网络（CDN）和缓存等技术。
平台支持：DASH可以在多个设备和平台上实现，包括桌面计算机、移动设备、智能电视和游戏机等。

DASH与其他流媒体传输协议（如RTMP和HLS）相比，具有更好的兼容性和灵活性。它被广泛应用于在线视频服务、视频直播、互动教育和企业内部视频传输等领域。同时，DASH也是MPEG（Moving Picture Experts Group）的国际标准之一，得到了业界的广泛支持和采用。

直播方案

ZLMediaKit

支持多种协议(RTSP/RTMP/HLS/HTTP-FLV/WebSocket-FLV/GB28181/HTTP-TS/WebSocket-TS/HTTP-fMP4/WebSocket-fMP4/MP4/WebRTC),支持协议互转。

直播流与播放器

流媒体格式	播放器
flv（h264/h265）	flv.js ：flv.js 的工作原理是将 FLV 文件流转换为 ISO BMFF（分段 MP4）段，然后将 mp4 段输入 HTML5 元素通过媒体源扩展 API。 mpegts.js：mpegts.js 是 flv.js 的升级版，由同一个作者开发。因为作者已经没有flv.js的权限，另开了一个项目，mpegts.js 支持 h265 格式播放。
webrtc	ZLMRTCClient：低延时播放器。WebRTC (Web Real-Time Communications) 是一项实时通讯技术，允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。

哪些浏览器可以播放 H265 格式视频？

谷歌（Chrome）和搜狗浏览器的 特定版本可以播放 H265 格式视频，具体如下：

搜狗浏览器

搜狗浏览器从版本号为 7.0.0.11058 开始支持 H265 格式视频播放。在这个版本后，搜狗浏览器内置了 H265 软件解码器，可以在不借助硬件的情况下对 H265 视频进行解码和播放。需要注意的是，使用软件解码器来解码 H265 视频可能会对 CPU 性能造成一定的压力，可能会导致电脑卡顿或者发热。

谷歌（Chrome）浏览器

Chrome 浏览器版本	说明
版本 >= 107	Chrome 浏览器 107 正式版将默认支持该 H265 格式硬件解码。
104.0.5061.1 <= 版本 < 107	2022年8月发布的Chrome 104.0.5061.1，开始支持H265硬解，只需chrome启动时增加启动项：`--enable-features=PlatformHEVCDecoderSupport` 即可实现H265播放；

注意：支持H265播放的Chrome浏览器还要求操作系统和硬件也支持该标准（Win10及以上、Mac 10.13 及以上支持）。如果操作系统和硬件不支持H265，则即使浏览器支持也无法播放。 有些较老的操作系统可能需要安装额外的解码器才能支持H265视频播放。

其它支持 h265 浏览器请查看：caniuse.com/?search=h26...

检查浏览器是否支持 H265 格式

将下面代码在浏览器控制台中执行，如果输出 true 则支持，输出 false 则不支持。

javascript 复制代码

function supportMSEH265Playback() {
  const supportTypes = ['hev1.1.6.L93.B0']
  const isSupported = supportTypes.some(supportType =>{
    return window.MediaSource.isTypeSupported(`video/mp4; codecs="${supportType}"`)
  })
  return window.MediaSource && isSupported
}

supportMSEH265Playback()