浏览器视频播放技术

HTML5 Video元素

HTML5引入了video元素，使得在浏览器中播放视频无需任何插件。video元素提供了原生的视频播放能力，支持多种视频格式，包括MP4、WebM、OGG等。通过JavaScript API，开发者可以完全控制视频的播放、暂停、跳转、音量等。

video元素的基本用法非常简单：在HTML中添加video标签，设置src属性指向视频文件，添加controls属性显示播放控件。还可以设置autoplay、loop、muted等属性控制播放行为。

Media Source Extensions（MSE）是一个W3C标准，允许JavaScript动态地向video元素提供媒体数据。MSE是实现自适应码率播放的关键技术，HLS.js和Dash.js等库都基于MSE实现。

MSE的工作原理：开发者通过JavaScript创建MediaSource对象，然后创建SourceBuffer，将视频数据（通常是fMP4格式）追加到SourceBuffer中。浏览器会自动从SourceBuffer中读取数据进行解码和播放。

Encrypted Media Extensions（EME）是一个W3C标准，用于在浏览器中播放加密的视频内容。EME提供了与DRM系统（如Widevine、FairPlay、PlayReady）交互的API，使得受保护的内容可以在浏览器中安全播放。

EME的工作流程：浏览器检测到加密内容后，会创建MediaKeySession并生成许可证请求；请求发送到DRM许可证服务器；服务器返回许可证解密密钥；浏览器使用密钥解密并播放内容。

WebCodecs API是一个新的W3C标准，提供了对浏览器内置编解码器的底层访问。与MSE不同，WebCodecs允许开发者直接控制视频的编码和解码过程，而无需依赖特定的容器格式。

WebCodecs的主要应用场景包括：实时视频处理和滤镜、视频录制和截图、低延迟视频流、自定义视频播放器等。WebCodecs目前在Chrome中已得到支持，其他浏览器也在逐步实现。

现代浏览器提供了全屏API和画中画API，增强视频播放体验。全屏API允许视频元素占据整个屏幕，提供沉浸式观看体验。画中画API允许视频在小窗口中浮动显示，用户可以在使用其他应用的同时继续观看视频。