适用于Vega的React Native W3C媒体API

• 标准属性：currentTime、duration、paused、volume
• 标准方法：play()、pause()、load()
• 标准事件：timeupdate、ended、error、loadedmetadata

​

媒体播放堆栈

1. 平台核心媒体组件：一组操作系统原生API，允许访问底层硬件处理块来对音频和视频帧进行解密、解码和渲染。它还在视频表面顶部显示隐藏式字幕。
   1. 音频/视频解码器：提供对硬件加速或软件音频和视频解码器的访问权限的API，该解码器受操作系统的片上系统 (SoC) 和板级支持程序包 (BSP) 支持，用于对帧进行解码。
   2. DRM：处理DRM许可证和密钥的API。它与解码器组件配合使用来解密安全信任区（TEE - 可信执行环境）中的帧。
   3. 视频表面：在屏幕上渲染视频的API。
   4. 音频：用于播放PCM（脉冲码调制）和直通Dolby和DTS音频帧的API。
   5. 隐藏式字幕/字幕组件：呈现隐藏式字幕和字幕的用户界面组件。
2. 开源GStreamer多媒体框架：这个基于Glib C的开源多媒体框架是Vega OS上媒体播放框架的基础。GStreamer是一个开源多媒体框架，为媒体处理提供了一组丰富的插件和工具。Vega媒体播放器利用核心GStreamer库以及亚马逊开发的一些开源插件和自定义插件来与特定于平台的媒体组件集成。
3. 原生W3C媒体：原生W3C媒体层是负责W3C媒体API原生实现的核心组件。在自适应流媒体 (MSE) 用例中，该层起着至关重要的作用。它负责解析传入的媒体片段，例如来自HLS或DASH流的媒体片段。解析后，它会解复用媒体样本并将其直接注入底层媒体播放器。媒体播放器 (C/C++) 使用GStreamer API提供高级别、简化的播放API来播放注入的A/V样本或内容URL。这允许上层与媒体播放功能进行交互，而无需直接处理底层GStreamer框架的复杂性。
4. 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开发的过渡

​

HTML5网页实现

// HTML5网页
const video = document.querySelector("video");
video.src = "video.mp4";
video.play();

​

Vega OS实现

// 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规范

​

格式兼容性

• URL模式： MP4、MP3、MKV、FLV、OGG、FLAC、AVI、QuickTime (MOV)、3GPP、MPEG2TS、WEBM
• MSE模式：
  • HLS (.m3u8)—碎片化MP4 (fMP4)、MPEG2TS
  • DASH (.mpd)—碎片化MP4 (fMP4)、WEBM
  • 流畅串流

• AV1： 4K@60fps，100 Mbps，主配置文件级别5.1，8/10位，HDR10/HDR10+/HLG
• H.265 (HEVC)： 4K@60fps，35 Mbps，主10配置文件级别5.1，8/10位，HDR10/HDR10+/HLG
• H.264 (AVC)： 4K@60fps，30 Mbps，高配置文件高达级别5.2
• VP9： 4K@60fps，30 Mbps，配置文件2，8/10位，HDR10/HLG
• VP8： 1080p@30fps，主配置文件（软件编解码器，非安全）
• MPEG-2： 1080p@60fps
• MPEG-4：1080p@30fps，简单配置文件和高级简单配置文件级别5，非安全

• Widevine： L1（硬件）用于HD/4K，L3（软件）用于SD
• PlayReady： SL2000/3000（硬件）、SL150（软件）

​

选择您的播放器类型

​

根据内容类型决定

​

MSE播放器选择（如有必要）

​

术语表

• SoC（片上系统）：一种集成电路，它包含了计算机或电子系统所需的全部组件。
• BSP（板级支持程序包）：一组软件组件，作为操作系统和特定硬件平台之间的接口。
• TEE（可信执行环境）：主处理器内的安全区域，用于运行敏感代码。
• MSE（媒体源扩展）：一种W3C API，可让JavaScript生成用于播放的媒体流。有关其他信息，请参阅Media Source Extension（仅提供英文版）。
• EME（加密媒体扩展）：一种W3C API，用于播放使用DRM的受保护内容。有关其他信息，请参阅Encrypted Media Extensions（仅提供英文版）。
• HLS（HTTP直播）：Apple的自适应流媒体协议。
• DASH（HTTP上的动态自适应流媒体）：自适应流媒体的ISO标准。有关其他信息，请参阅Information technology—Dynamic adaptive streaming over HTTP (DASH)（仅提供英文版）。
• PCM（脉冲码调制）：未压缩的数字音频格式。

​

相关主题

• 媒体播放器API参考 - 完整的API参考和方法文档
• 媒体播放器设置指南 - 详细的设置说明
• Shaka播放器集成 - 完成Shaka设置
• 媒体播放器演练 - 工作示例

• DRM实施 - 内容保护
• 性能优化 - 速度调优
• Vega媒体控制 - 系统集成

• 媒体播放器API参考 - HTMLMediaElement、VideoPlayer和组件API
• 需求指南 - 技术规格
• 常见问题解答 - 常见问题和解决方案