Vega OS上的React Native W3C媒体API
Vega OS上的React Native W3C媒体API
Vega媒体播放器为Fire TV设备上的React Native应用带来了W3C（万维网联盟）媒体API的强大功能。您可以沿用网页开发中那些您已熟悉的标准，例如<video>元素和HTMLMediaElement。
Vega媒体播放器支持HTMLMediaElement，可实现基本媒体播放功能；支持媒体源扩展 (MSE)，可用于自适应流媒体；还支持加密媒体扩展 (EME)，以保护受DRM保护的内容。在Vega设备中，媒体播放器堆栈基于GStreamer框架运行，以实现硬件加速的解码和画面渲染功能。
以下是一些您可能已经熟悉的、我们额外支持的HTML5属性：
- 标准属性：
currentTime、duration、paused、volume - 标准方法：
play()、pause()、load() - 标准事件：
timeupdate、ended、error、loadedmetadata
媒体播放堆栈
媒体播放堆栈是一种分层架构，它利用底层系统的功能，在Vega OS上的React Native应用中提供标准化、符合W3C的媒体播放体验。
以下部分从下到上地介绍了Vega媒体播放架构堆栈：
- 平台核心媒体组件： 一组操作系统原生API，允许访问底层硬件处理块来对音频和视频帧进行解密、解码和渲染。它还在视频表面顶部显示隐藏式字幕。
- 音频/视频解码器： 提供对硬件加速或软件音频和视频解码器的访问权限的API，该解码器受操作系统的片上系统 (SoC) 和板级支持程序包 (BSP) 支持，用于对帧进行解码。
- DRM： 处理DRM许可证和密钥的API。它与解码器组件配合使用来解密安全信任区（TEE - 可信执行环境）中的帧。
- 视频表面： 在屏幕上渲染视频的API。
- 音频： 用于播放PCM和直通Dolby和DTS音频帧的API。
- 隐藏式字幕/字幕组件： 呈现隐藏式字幕和字幕的用户界面组件。
- 开源GStreamer多媒体框架： 这个基于Glib C的开源多媒体框架是Vega OS上媒体播放框架的基础。GStreamer是一个开源多媒体框架，为媒体处理提供了一组丰富的插件和工具。Vega媒体播放器利用核心GStreamer库以及亚马逊开发的一些开源插件和自定义插件来与特定于平台的媒体组件集成。
- 原生W3C媒体： 原生W3C媒体层是负责W3C媒体API原生实现的核心组件。在自适应流媒体 (MSE) 用例中，该层起着至关重要的作用。它负责解析传入的媒体片段，例如来自HLS或DASH流的媒体片段。解析后，它会解复用媒体样本并将其直接注入底层媒体播放器。媒体播放器 (C/C++) 使用GStreamer API提供高级别、简化的播放API来播放注入的A/V样本或内容URL。这允许上层与媒体播放功能进行交互，而无需直接处理底层GStreamer框架的复杂性。
- W3C媒体JS API： W3C媒体JS API层提供了一个基于JavaScript的接口，该接口为媒体播放提供了符合W3C的API。这包括熟悉的网页API，例如
HTMLMediaElement、媒体源扩展 (MSE) 和加密媒体扩展 (EME)。这些JavaScript绑定充当应用代码和媒体播放堆栈的底层原生实现之间的桥梁。当应用与W3C媒体JS API进行交互时（例如在HTMLMediaElement对象上调用play()方法），请求将通过KeplerW3CTurboModule路由到原生层。通过抽象出低级平台的细节，W3C媒体Javascript API使开发者可以更轻松地在运行Vega OS的设备上构建富媒体的React Native应用，而不会牺牲底层媒体播放堆栈的质量和可靠性。
网页开发到Vega开发的过渡
Vega OS提供符合W3C的媒体播放API，您可以使用它将HTML5视频实现过渡到React Native应用，只需对代码进行很少的更改。以下示例演示了熟悉的网页模式如何转换为Vega OS。
HTML5网页实现
在标准网页环境中，视频播放使用原生HTMLMediaElement API。
// HTML5网页
const video = document.querySelector("video");
video.src = "video.mp4";
video.play();
这种简单的三行实现利用浏览器内置的视频元素来加载和播放媒体内容。
Vega OS实现
Vega OS实现保持了相同的概念模型，同时适应适用于Vega的React Native环境。
// Vega
// 从react和react-native程序包导入所需组件
import React from 'react';
import {useRef} from 'react';
import {View} from 'react-native';
// 从@amzn/react-native-w3cmedia NPM程序包
// 导入VideoPlayer和KeplerVideoView组件。
import {VideoPlayer, KeplerVideoView} from '@amazon-devices/react-native-w3cmedia';
export const App = () => {
// 声明对video组件的引用
const video = useRef<VideoPlayer | null>(new VideoPlayer());
video.current.initialize().then(() => {
video.current.src = "video.mp4"; // 设置HTMLMediaElement的src属性
video.current.play();
});
// 将KeplerVideoView组件添加到渲染树中。
return (
<View style={{flex: 1}}>
<KeplerVideoView
videoPlayer={video.current as VideoPlayer}
/>
</View>
);
};
主要区别
- 初始化： Vega需要播放之前的显式
initialize()，这与视频元素立即准备就绪的网页浏览器不同 - 组件架构： Vega将
VideoPlayer控制器与KeplerVideoView渲染组件分开 - API兼容性： 尽管存在结构差异，但核心
HTMLMediaElement属性、方法和事件遵循W3C规范
格式兼容性
Vega媒体播放器支持以下媒体格式和编解码器。电视硬件可能存在某些依赖关系（例如，Dolby音频或4K播放），因此，在开始播放之前，应用需要检查输出设备的媒体功能，这样才能选择正确的编解码器进行播放。
支持的格式：
- URL模式： MP4、MP3、MKV、FLV、OGG、FLAC
- MSE模式： HLS (.m3u8)、DASH (.mpd)、SmoothStreaming
支持的编解码器：
- 视频： H.264、H.265、VP8、VP9、AV1、MPEG2
- 音频： AAC、MP3、Dolby（AC3、eAC3、AC4）、DTS、Opus、FLAC
DRM支持：
- Widevine： L1（硬件）用于HD/4K，L3（软件）用于SD
- PlayReady： SL2000/3000（硬件）、SL150（软件）
选择您的播放器类型
您需要做出一个重要决策：根据您的内容和具体需求，挑选最合适的播放方案。以下流程图可以帮助您做出播放模式决策。
根据内容类型决定
MSE播放器选择（如有必要）
对于自适应流媒体内容，您需要选择一个合适的JavaScript播放器。需要考虑的因素包括：流媒体类型（HLS、DASH或两者兼而有之）、DRM、直播内容、分析、开源软件与商业软件等等。本指南使用Shaka播放器，这是因为这种播放器能处理各种内容类型和场景。但是，您可以根据自己的特定要求选择其他兼容MSE的播放器（例如HLS.js、Dash.js或商业播放器）。
有关支持的播放器清单，请参阅“支持的库和服务”中的兼容Vega的媒体播放器。
- 媒体播放器API参考 - 完整的API参考和方法文档
- 媒体播放器设置指南 - 详细的设置说明
- Shaka播放器集成 - 完成Shaka设置
- 媒体播放器演练 - 工作示例
高级主题：
参考资料：
- 媒体播放器API参考 - HTMLMediaElement、VideoPlayer和组件API
- 需求指南 - 技术规格
- 常见问题解答 - 常见问题和解决方案
术语表
- SoC（片上系统）： 包含计算机或电子系统所有组件的集成电路
- BSP（板级支持程序包）： 操作系统和特定硬件平台之间接口的软件组件
- TEE（可信执行环境）： 主处理器内的安全区域，用于执行敏感代码
- MSE（媒体源扩展）： W3C API可让JavaScript生成用于播放的媒体流
- EME（加密媒体扩展）： 用于播放通过DRM受保护内容的W3C API
- HLS（HTTP直播）： Apple的自适应流媒体协议
- DASH（HTTP上的动态自适应流媒体）： 自适应流媒体的ISO标准
- PCM（脉冲码调制）： 未压缩的数字音频格式
Last updated: 2025年1月13日
