Media Player walkthrough

This walkthrough shows the process playing back DRM content, and implementing basic business logic on W3C elements.

This is a new software stack built from scratch, it's expected that some content formats might fail to play and/or might have playback issues such as failing to start playback, video frame drops, A/V Sync etc. We are continuously working to improve the content coverage and hope that app development partners will be able to share sufficient information to root cause the playback issues of their contents.

Prerequisites

Set up your app to use the WC3 Media Player. For more information, see Media Player Setup.

Read the W3C Media API in React Native for Vega overview about the W3C Media APIs in Vega SDK. The player implements the following specifications:

• HTMLMediaElement
• Media Source Extension
• Encrypted Media Extension

For more details about the Shaka Player and the different configurations it supports, see Shaka Player.

Playing non-adaptive (MP4, MP3) content

This section describes how to play non-adaptive (MP4, MP3) content in “URL mode”, using the HTMLMediaElement.src attribute. The section after this will cover adaptive media streaming content with Shaka Player.

1. Open your src/App.tsx file and replace the contents with the following code. The code adds a <VegaVideoSurfaceView> and <VegaCaptionView> component to the render tree and attaches them to VideoPlayer component which uses the Autoplay value to specify that video starts to play the when Video component loads. For audio only content, adding the <VegaVideoSurfaceView> and <VegaCaptionView> are optional.

    
  /*
  * Copyright (c) 2024 Amazon.com, Inc. or its affiliates.  All rights reserved.
  *
  * PROPRIETARY/CONFIDENTIAL.  USE IS SUBJECT TO LICENSE TERMS.
  */

  // Import the required components from react and react-native packages
  import React from 'react';
  import {useRef, useEffect, useState} from 'react';
  import {View} from 'react-native';

  // Import VideoPlayer component from @amazon-devices/react-native-w3cmedia NPM package.
  import {VideoPlayer, VegaVideoView} from '@amazon-devices/react-native-w3cmedia';

  // Add your content here
  const content = {
    uri: 'https://html5demos.com/assets/dizzy.mp4',
  };

  export const App = () => {
    // Declare a reference to video component
    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; // set HTMLMediaElement's src attribute
      setUseVegaVideoView(true);
      console.log(
            'AppNonAdaptive init complete, setting kepler video view to true',
          );
    };

    // Add VegaVideoView component to the render tree
    return (
      <View>
        {useVegaVideoView ? (
          <VegaVideoView
            showControls={true}
            videoPlayer={video.current as VideoPlayer}
          />
        ) : null}
      </View>
    );
  };
  

Use the Vega SDK to build the app, run it on device or simulator and collect logs. For more details about building and running apps on the simulator, see see Create a Vega App, Vega Virtual Device, and Run your app on Fire TV Stick.

Next steps

Use the Shaka Player to playback content, see Playing Adaptive Streaming Content (HLS/DASH) with Shaka Player.

Playback content on a device, see Media Player on the Fire TV device.

See Also

Media Player API

Last updated: Sep 30, 2025