视频格式、协议及其 JavaScript 本地解析

理论知识：

视频格式：

视频格式由封装格式和编码格式组成。

封装格式（如 .mp4、.mkv、.webm）：决定文件结构；
编码格式：决定视频压缩方式。例如：H.264：广泛兼容的压缩方式；VP9：更适合 Web 视频；H.265：适合高清和4K视频，具有更高的压缩效率。

此外，分辨率、帧率、码率等参数决定视频的清晰度、流畅度和质量。

常见的视频格式：

MP4 (MPEG-4 Part 14)：最常用的视频格式之一，支持 H.264 编码，广泛应用于网络视频。
WebM：开放格式，支持 VP8/VP9 编码，适用于 Web 平台。
OGG：开源的媒体容器格式，支持 Theora 视频编码。
AVI：较老的视频格式，不常用但仍然存在。
FLV：曾广泛用于 Flash 播放器，现在使用较少。
MKV ：支持多种编解码器，适合高灵活性要求的场景。

视频传输协议：

HTTP ：最基本的传输协议，适用于静态视频文件的传输。
HTTPS：安全版本的 HTTP，使用 SSL/TLS 加密。
HLS：基于 HTTP 的流媒体协议，支持分段传输和多码率自适应，适合点播（VOD）。
DASH：ISO 标准流媒体协议，支持分段传输和多码率自适应，兼容性更广。
RTMP ：实时流媒体协议，延迟低，适用于直播。
RTSP：用于控制多媒体流，常与 RTP 协议结合。
WebRTC：用于实时通信（如视频会议）或互动直播，低延迟。

JavaScript 本地解析：

在前端，可以利用浏览器 API 和第三方库解析、播放各种视频格式和协议。

使用 HTML5 `<video>` 标签

HTML5 提供了 <video> 标签，可以直接嵌入视频格式（MP4、WebM、Ogg）并进行播放HLS 和 DASH 流。

<video id="videoPlayer" controls><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm">
</video>

支持 HLS 和 DASH 的库：

HLS.js

用于浏览器中解析和播放 HLS 流媒体的 JavaScript 库，兼容性好。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="videoPlayer" controls></video>
<script>if (Hls.isSupported()) {const video = document.getElementById('videoPlayer');const hls = new Hls();hls.loadSource('https://example.com/video/stream.m3u8');hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED, () => {video.play();});}
</script>

DASH.js

用于播放 DASH 流的 JavaScript 库，支持自适应流。

<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
<video id="videoPlayer" controls></video>
<script>const video = document.getElementById('videoPlayer');const url = 'https://example.com/video/stream.mpd';if (dashjs.MediaPlayer.isSupported()) {const player = dashjs.MediaPlayer().create();player.initialize(video, url, true);}
</script>

WebRTC 实时视频

WebRTC 提供了 getUserMedia、RTCPeerConnection 等 API，用于实现实时音视频通信。常用于视频通话或低延迟直播场景。

// 获取本地摄像头视频流
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {const video = document.getElementById('localVideo');video.srcObject = stream;video.play();}).catch((error) => {console.error('Error accessing media devices.', error);});

本地解析视频

可以使用 File API 和 Blob 对象读取和处理本地视频文件。

<input type="file" id="videoFileInput" accept="video/*">
<video id="videoPlayer" controls></video><script>
document.getElementById('videoFileInput').addEventListener('change', (event) => {const file = event.target.files[0];if (file) {const videoPlayer = document.getElementById('videoPlayer');const objectUrl = URL.createObjectURL(file);videoPlayer.src = objectUrl;}
});
</script>