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

Web-to-Vega transition

To further illustrate, the following code example shows the a simple scenario for video playback on a component.

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

// Vega
const video = new VideoPlayer();
await video.initialize();
video.src = "video.mp4";
video.play();

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.

Content Type Decision

┌─────────────────────────────────────────────────────────────────┐
│                     What type of content?                       │
└───────────────────────────────┬─────────────────────────────────┘
                                │
                  ┌─────────────▼─────────────┐
                  │ Simple files (MP4, MP3)?  │
                  │ No adaptive streaming?    │
                  └─────────────┬─────────────┘
                                │ Yes
                          ┌─────▼─────┐
                          │ Use URL   │
                          │ Mode      │
                          │ (Simple)  │
                          └───────────┘
                                │ No
                    ┌───────────▼───────────┐
                    │ Adaptive streaming?   │
                    │ (HLS, DASH, Live TV)  │
                    └───────────┬───────────┘
                                │ Yes
                                ▼
                     See MSE Player Selection 

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

Last updated: Oct 01, 2025