Console

Settings

Sign out

Notifications

Alexa

亚马逊应用商店

AWS

文档

Support

My Cases

Console

Vega开发者文档

主页

新手入门

设计和开发

应用发布

参考

支持

选择播放模式

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅发布说明。

您可以利用W3C媒体API通过几种不同的方式为Vega OS构建媒体播放器应用：

直接使用W3C媒体API：这是播放扁平（非ABR）内容时的合适方法。
使用W3C媒体API构建自定义JavaScript播放器：开发者可以通过直接集成相关的W3C媒体API来创建自己基于JavaScript的专有媒体播放器。
集成现有的JavaScript播放器库：有几种流行的JavaScript媒体播放器库可供选择，例如Shaka播放器、hls.js、dash.js和Bitmovin播放器。开发者可以选择整合其中一个现有播放器，这为底层的W3C媒体API提供了抽象功能。

有关Vega SDK中W3C媒体API的概述，请参阅Vega OS上的React Native W3C媒体API。

无论采用哪种方法，您都应该熟悉相关的W3C规范和所选播放器API的文档：

HTMLMediaElement
媒体源扩展（仅供英文版）
加密媒体扩展（仅供英文版）

这样可以全面了解可用功能和性能，从而做出更明智的决策，更好地实施适用于Vega OS的媒体播放器应用。

根据内容的性质，无论是扁平内容还是ABR，应用都需要使用以下播放模式之一。

URL模式

URL模式专为播放MP4和MP3文件等非自适应内容格式而设计。在此模式下，您可以直接使用HTMLMediaElement.src属性设置媒体源。

纯音频播放示例

以下示例演示了一个简单的纯音频播放实现。

已复制到剪贴板。

/*
 * 版权所有 (c) 2025 Amazon.com, Inc.或其关联公司。 保留所有权利。
 *
 * 专有/机密信息。 相关使用受许可条款的约束。
 */

import React, {useRef} from 'react';
import {View, Text} from 'react-native';
import {VideoPlayer} from '@amazon-devices/react-native-w3cmedia';

export const App = () => {
  const audio = useRef<VideoPlayer | null>(new AudioPlayer());

  audio.current?.initialize().then(() => {
    audio.current!.autoplay = true;
    audio.current!.src = 'https://<流媒体服务器>.com/audio_only.mp3';
  });

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'black'}}>
      <Text style={{color: 'white', fontSize: 18}}>音频播放</Text>
    </View>
  );
};

在该示例中：

使用useRef() 创建VideoPlayer实例
初始化播放器并将自动播放设置为true以便自动开始播放
使用src属性设置音频源URL
渲染带有指示音频播放的文本的简单用户界面

视频播放示例

以下示例演示了在URL模式下播放视频。

已复制到剪贴板。

/*
 * 版权所有 (c) 2025 Amazon.com, Inc.或其关联公司。 保留所有权利。
 *
 * 专有/机密信息。 相关使用受许可条款的约束。
 */

import React, {useRef} from 'react';
import {View} from 'react-native';
import {
  VideoPlayer,
  KeplerVideoSurfaceView,
} from '@amazon-devices/react-native-w3cmedia';

export const App = () => {
  const video = useRef<VideoPlayer | null>(new VideoPlayer());

  const onSurfaceViewCreated = async (surfaceHandle: string) => {
    await video.current?.initialize();
    video.current?.setSurfaceHandle(surfaceHandle);
    video.current!.autoplay = true;
    video.current!.src = 'https://<流媒体服务器>.com/av.mp4';
  };

  const onSurfaceViewDestroyed = async (surfaceHandle: string) => {
    video.current?.clearSurfaceHandle(surfaceHandle);
    await video.current?.deinitialize();
    video.current = null;
  };

  return (
    <View style={{flex: 1}}>
      <KeplerVideoSurfaceView
        style={{flex: 1}}
        onSurfaceViewCreated={onSurfaceViewCreated}
        onSurfaceViewDestroyed={onSurfaceViewDestroyed}
      />
    </View>
  );
};

在该示例中：

使用useRef() 创建VideoPlayer的实例
实现 onSurfaceViewCreated回调，该回调可以：
- 初始化视频播放器
- 使用setSurfaceHandle() 将播放器连接到表面
- 启用自动播放
- 设置视频源URL
实现onSurfaceViewDestroyed回调，该回调可以：
- 断开表面句柄的连接
- 取消播放器的初始化
- 清理播放器参考
使用生命周期回调渲染组件

音频和视频播放之间的主要区别：

表面管理：视频播放需要通过onSurfaceViewCreated和onSurfaceViewDestroyed回调来管理KeplerVideoSurfaceView生命周期
表面句柄：视频播放需要使用setSurfaceHandle() 将播放器连接到渲染表面
清理：视频播放需要对表面句柄进行适当的清理，并在表面被破坏时取消初始化

MSE模式

使用MSE（媒体源扩展）模式播放自适应比特率内容，例如HLS或DASH流。此模式需要集成基于JavaScript的媒体播放器库，用于处理自适应媒体流的下载和管理。

选择媒体播放器

多个JavaScript媒体播放器库支持MSE，包括：

开源： Shaka播放器、Dash.js、HLS.js、Bitmovin、Video.js
商业： Bitmovin和其他专有解决方案

您的应用必须集成其中一个播放器，并使用Vega提供的W3C API与媒体内容进行交互。有关兼容播放器的完整列表，请参阅支持的库和服务中的Vega兼容媒体播放器。

使用Shaka播放器的MSE流媒体示例

以下示例演示了使用Shaka播放器流式播放DASH内容。

已复制到剪贴板。

/*
/*
 * 版权所有 (c) 2025 Amazon.com, Inc.或其关联公司。 保留所有权利。
 *
 * 专有/机密信息。 相关使用受许可条款的约束。
 */

import React, {useRef} from 'react';
import {View} from 'react-native';
import {
  VideoPlayer,
  KeplerVideoSurfaceView,
  KeplerCaptionsView,
} from '@amazon-devices/react-native-w3cmedia';
import {ShakaPlayer, ShakaPlayerSettings} from './shakaplayer/ShakaPlayer';

const content = {
  secure: 'false',
  uri: 'https://<流媒体服务器>.com/dash.mpd',
  drm_scheme: '',
  drm_license_uri: '',
};

const playerSettings: ShakaPlayerSettings = {
  secure: false,
  abrEnabled: true,
};

export const App = () => {
  const videoPlayer = useRef<VideoPlayer | null>(new VideoPlayer());
  const shakaPlayer = useRef<any>(null);

  const onSurfaceViewCreated = async (surfaceHandle: string) => {
    await videoPlayer.current?.initialize();
    videoPlayer.current?.setSurfaceHandle(surfaceHandle);
    videoPlayer.current!.autoplay = true;
    
    shakaPlayer.current = new ShakaPlayer(videoPlayer.current!, playerSettings);
    shakaPlayer.current.load(content, true);
  };

  const onSurfaceViewDestroyed = async (surfaceHandle: string) => {
    videoPlayer.current?.clearSurfaceHandle(surfaceHandle);
    shakaPlayer.current?.unload();
    shakaPlayer.current = null;
    await videoPlayer.current?.deinitialize();
    videoPlayer.current = null;
  };

  const onCaptionViewCreated = (captionsHandle: string) => {
    videoPlayer.current?.setCaptionViewHandle(captionsHandle);
  };

  return (
    <View style={{flex: 1, backgroundColor: 'black'}}>
      <KeplerVideoSurfaceView
        style={{flex: 1}}
        onSurfaceViewCreated={onSurfaceViewCreated}
        onSurfaceViewDestroyed={onSurfaceViewDestroyed}
      />
      <KeplerCaptionsView
        onCaptionViewCreated={onCaptionViewCreated}
        show={true}
        style=
      />

    </View>
  );
};

在该示例中：

配置内容：定义DASH清单URL和DRM设置（如果需要）
设置播放器选项：启用自适应比特率 (ABR) 流式传输
初始化视频播放器：在创建表面时创建和初始化VideoPlayer实例
集成Shaka播放器：创建ShakaPlayer实例并加载内容
管理字幕：为字幕渲染设置KeplerCaptionsView组件
处理清理：当表面被摧毁时，正确卸载播放器并取消资源初始化

构建和测试

使用Vega SDK构建应用并在设备或模拟器上运行。有关详细说明，请参阅以下主题：

重要须知： URL模式与MSE模式

自适应流媒体不支持URL模式。尽管URL模式在有限的情况下可能适用于某些基本的自适应内容，但不能保证其行为，而且官方不支持自适应比特率直播。

仅将URL模式用于：

非自适应内容（MP4、MP3文件）• 简单的播放场景

使用MSE模式可以：

自适应比特率内容（HLS、DASH流）
受DRM保护的内容
直播
高级播放功能

对于自适应内容，请务必使用MSE模式和基于JavaScript的媒体播放器库，该库可以正确处理自适应流媒体协议。

后续步骤

选择播放器时，请考虑支持的功能、性能、社区支持和许可等因素。查看每个播放器提供的文档和示例，以确定最适合您的应用要求的版本。选择播放器后，请参阅其集成指南，了解如何在React Native媒体播放器应用中进行设置和使用。其中一些播放器已经移植，请参阅以下内容：

W3C媒体功能

Last updated: 2026年1月16日

选择播放模式

URL模式

纯音频播放示例

视频播放示例

MSE模式

选择媒体播放器

使用Shaka播放器的MSE流媒体示例

构建和测试

重要须知： URL模式与MSE模式

后续步骤

相关主题