W3C Media API in React Native for Vega

The Vega Media Player brings the power of W3C (World Wide Web Consortium) Media APIs to React Native applications on Fire TV devices. You can use the same familiar standards from web development, including <video> elements and HTMLMediaElement.

The Vega Media Player supports HTMLMediaElement for basic media playback, Media Source Extensions (MSE) for adaptive streaming, and Encrypted Media Extensions (EME) for DRM content protection. The media player stack runs on top of the GStreamer framework on Vega devices for hardware-accelerated decoding and rendering.

Additional supported HTML5 attributes that you might be familiar with include:

• Standard properties: currentTime, duration, paused, volume
• Standard methods: play(), pause(), load()
• Standard events: timeupdate, ended, error, loadedmetadata

Media Playback Stack

The Media Playback Stack is a layered architecture that leverages the capabilities of the underlying system to provide a standardized, W3C-compliant media playback experience in React Native apps on Vega OS.

The following section describes the Vega Media Playback architecture stack starting from the bottom to the top:

1. Platform core media components: A set of OS native APIs that allow access to underlying hardware processing blocks to decrypt, decode, and render audio and video frames. It also displays closed caption on top of the video surface.
   1. Audio/Video Decoder: The API that provides access to hardware accelerated or software audio and video decoder supported by the System on a Chip (SoC) and Board Support Package (BSP) of the OS to decode a frame.
   2. DRM: The API that handles the DRM license and keys. It works with the decoder component to decrypt the frames in the Secure Trust Zone (TEE - Trusted Execution Environment).
   3. Video Surface: The API that renders video on screen.
   4. Audio: The API to playback PCM and pass-through Dolby and DTS audio frames.
   5. Captions/Subtitles Component: A UI component that renders captions and subtitles.
2. Open Source GStreamer Multimedia Framework: This open source multimedia framework based on Glib C is the foundation of media playback framework on the Vega OS. GStreamer is an open-source multimedia framework that provides a rich set of plugins and tools for media processing. The Vega Media Player leverages the core GStreamer library, along with some open-source plugins and custom plugins developed by Amazon, to integrate with the platform-specific media components.
3. Native W3C Media: The Native W3C Media layer is the core component responsible for the native implementation of the W3C Media APIs. In the adaptive streaming (MSE) use case, this layer plays a critical role. It is responsible for parsing the incoming media segments, such as those from HLS or DASH streams. After parsing, it demultiplexes the media samples and injects them directly into the underlying media player. The Media Player (C/C++) uses the GStreamer APIs to provide a high-level, simplified playback API to play injected A/V Samples, or a content URL. This allows the upper layers to interact with the media playback functionality without directly dealing with the complexities of the underlying GStreamer framework.
4. W3C Media JS API: The W3C Media JS API layer provides a JavaScript-based interface that exposes W3C-compliant APIs for media playback. This includes familiar web APIs such as HTMLMediaElement, Media Source Extensions (MSE), and Encrypted Media Extensions (EME). These JavaScript bindings serve as a bridge between the app code and the underlying native implementation of the media playback stack. When the app interacts with the W3C Media JS APIs, such as calling the play() method on an HTMLMediaElement object, the requests are routed through the KeplerW3CTurboModule to the native layer. By abstracting away the low-level platform details, the W3C Media Javascript API makes it easier for developers to build media-rich React Native apps on devices running the Vega OS, without sacrificing the quality and reliability of the

Web-to-Vega transition

The Vega OS provides a W3C-compliant media playback API that you can use to transition your HTML5 video implementations to React Native apps with minimal code changes. The following examples demonstrate how familiar web patterns translate to the Vega OS.

HTML5 Web Implementation

In a standard web environment, video playback uses the native HTMLMediaElement API.

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

This simple three-line implementation leverages the browser's built-in video element to load and play media content.

Vega OS Implementation

The Vega OS implementation maintains the same conceptual model while adapting to the React Native for Vega environment.

// Vega

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

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

export const App = () => {
  // Declare a reference to video component
  const video = useRef<VideoPlayer | null>(new VideoPlayer());

  video.current.initialize().then(() => {
      video.current.src = "video.mp4"; // set HTMLMediaElement's src attribute
      video.current.play();
  });

  // Add KeplerVideoView component to the render tree
  return (
    <View style={{flex: 1}}>
        <KeplerVideoView
          videoPlayer={video.current as VideoPlayer}
        />
    </View>
  );
};

Key Differences

• Initialization: Vega requires explicit initialize() before playback, unlike web browsers where video elements are immediately ready
• Component Architecture: Vega separates the VideoPlayer controller from the KeplerVideoView rendering component
• API Compatibility: Despite structural differences, core HTMLMediaElement properties, methods, and events follow W3C specifications

Format Compatibility

The Vega Media Player supports the following media formats and codecs. There might be some dependencies on the hardware of the TV (For example, Dolby audio or 4K playback), so it is important for application to check the media capabilities of the output device before starting playback so that the correct codecs can be selected for playback

Supported Formats:

• URL Mode: MP4, MP3, MKV, FLV, OGG, FLAC
• MSE Mode: HLS (.m3u8), DASH (.mpd), SmoothStreaming

Supported Codecs:

• Video: H.264, H.265, VP8, VP9, AV1
• Audio: AAC, MP3, Dolby (AC3, eAC3, AC4), Opus, FLAC

DRM Support:

• Widevine: L1 (hardware) for HD/4K, L3 (software) for SD
• PlayReady: SL2000/3000 (hardware), SL150 (software)

Choose Your Player Type

A key decision is selecting the right playback approach for your content and requirements. The following flow chart can help you make your playback mode decision.

Content Type Decision

MSE player selection (if necessary)

For adaptive streaming content, you need to choose an appropriate JavaScript player. Consider factors such as streaming type (HLS, DASH, or both), DRM, Live Content, analytics, open source vs commercial, and more. This guide uses Shaka Player as it handles the a wide range of content types and scenarios. However, you can choose an alternate MSE-compatible player (such as HLS.js, Dash.js, or a commercial player) based on your specific requirements.

For a list of supported player, see Vega compatible media players in "Supported Libraries and Services".

Related topics

Essential Reading:

• Media Player API Reference - Complete API reference and method documentation
• Media Player Setup Guide - Detailed setup instructions
• Shaka Player Integration - Complete Shaka setup
• Media Player Walkthrough - Working examples

Advanced Topics:

• DRM Implementation - Content protection
• Performance Optimization - Speed tuning
• Vega Media Controls - System integration

Reference Materials:

• Media Player API Reference - HTMLMediaElement, VideoPlayer, and component APIs
• Requirements Guide - Technical specifications
• FAQ - Common questions and solutions

Glossary

• SoC (System on a Chip): An integrated circuit that contains all components of a computer or electronic system
• BSP (Board Support Package): Software components that interface between the OS and specific hardware platform
• TEE (Trusted Execution Environment): A secure area within the main processor for executing sensitive code
• MSE (Media Source Extensions): W3C API enabling JavaScript to generate media streams for playback
• EME (Encrypted Media Extensions): W3C API for playing protected content with DRM
• HLS (HTTP Live Streaming): Apple's adaptive streaming protocol
• DASH (Dynamic Adaptive Streaming over HTTP): ISO standard for adaptive streaming
• PCM (Pulse Code Modulation): Uncompressed digital audio format

Last updated: Jan 13, 2026