媒体播放器演练

本演练展示了播放DRM内容以及在W3C元素上实现基本业务逻辑的过程。

这是一个从头开始构建的新软件堆栈，预计某些内容格式可能无法播放和/或可能出现播放问题，例如无法开始播放、视频帧丢失、A/V同步问题等。我们一直在努力改善内容覆盖范围，并希望应用开发合作伙伴能够共享足够的信息，以确定造成其内容播放问题的根本原因。

先决条件

将您的应用设置成使用WC3媒体播放器。有关更多信息，请参阅媒体播放器设置。

阅读适用于Vega的React Native W3C媒体API概述，了解Vega SDK中的W3C媒体API。播放器实现以下规范：

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

有关Shaka播放器及其支持的不同配置的更多详细信息，请参阅Shaka播放器。

播放非自适应（MP4、MP3）内容

本节介绍如何使用HTMLMediaElement.src属性在“URL模式”下播放非自适应（MP4、MP3）内容。后面的部分将介绍有关Shaka播放器的自适应流媒体内容。

• 打开您的src/App.tsx文件并将内容替换为以下代码。该代码将<VegaVideoSurfaceView>和<VegaCaptionView>组件添加到渲染树中，并将它们附加到VideoPlayer组件，该组件使用Autoplay值来指定视频在加载Video组件时开始播放。对于纯音频内容，添加<VegaVideoSurfaceView>和<VegaCaptionView>是可选的。

  复制代码 已复制到剪贴板。

      
  /*
  * 版权所有 (c) 2024 Amazon.com, Inc.或其关联公司。 保留所有权利。
  *
  * 专有/机密信息。 相关使用受许可条款的约束。
  */
  
  // 从react和react-native程序包导入所需组件
  import React from 'react';
  import {useRef, useEffect, useState} from 'react';
  import {View} from 'react-native';
  
  // 从@amazon-devices/react-native-w3cmedia NPM程序包导入VideoPlayer组件。
  import {VideoPlayer, VegaVideoView} from '@amazon-devices/react-native-w3cmedia';
  
  // 在此添加您的内容
  const content = {
    uri: 'https://html5demos.com/assets/dizzy.mp4',
  };
  
  export const App = () => {
    // 声明对video组件的引用
    const video = useRef<VideoPlayer | null>(null);
    const [useVegaVideoView, setUseVegaVideoView] = useState(false);
  
    useEffect(() => {
      console.log('AppNonAdaptive v1.13');
      initializingPreBuffering();
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
  
    const initializingPreBuffering = async () => {
      video.current = new VideoPlayer();
      await video.current.initialize();
      video.current!.autoplay = false;
      video.current.src = content.uri; // 设置HTMLMediaElement的src属性
      setUseVegaVideoView(true);
      console.log(
            'AppNonAdaptive初始化完成，将KeplerVideoView设置为true。',
          );
    };
  
    // 将VegaVideoView组件添加到渲染树中。
    return (
      <View>
        {useVegaVideoView ? (
          <VegaVideoView
            showControls={true}
            videoPlayer={video.current as VideoPlayer}
          />
        ) : null}
      </View>
    );
  };
    
  

使用Vega SDK来构建应用，在设备或模拟器上运行它并收集日志。有关在模拟器上构建和运行应用的更多详细信息，请参阅创建Vega应用、Vega虚拟设备和在Fire TV Stick上运行应用。

后续步骤

使用Shaka播放器来播放内容，请参阅使用Shaka播放器来播放自适应流媒体内容(HLS/DASH)。

在设备上播放内容，请参阅Fire TV设备上的媒体播放器。

另请参阅

媒体播放器API

---

Last updated: 2025年10月21日