Play DynTube Videos in React Native

React Native applications can play supported DynTube HLS output through a maintained native video component. Treat playback as an authorized application flow: your backend identifies the viewer and video, returns the permitted playback data, and the mobile app passes the resulting HLS URL to its player.

Install a maintained player

npm install react-native-video

Follow the library's current installation instructions for your React Native version, iOS pods, Android build, and platform configuration. Modern React Native projects normally use native autolinking, so apply manual linking only when the library documentation for your exact setup requires it.

Render an authorized HLS URL

import Video from "react-native-video";

type Props = { hlsUrl: string };

export function DynTubeVideo({ hlsUrl }: Props) {
  return (
    <Video
      source={{ uri: hlsUrl }}
      controls
      resizeMode="contain"
      style={{ width: "100%", aspectRatio: 16 / 9, backgroundColor: "black" }}
      onError={(event) => console.error("Playback failed", event.error?.code)}
    />
  );
}

Obtain hlsUrl from your trusted backend or from the approved DynTube workflow for your account. Keep DynTube API and signing keys off the device, avoid logging query tokens, and refresh short-lived playback access through the backend when required.

https://api.dyntube.com/v1/apps/hls/YOUR_HLS_LINK.m3u8

Match project protection

AES-128 and DRM use different client capabilities, and Extra Security can restrict ordinary third-party-player key delivery. Confirm the project's enabled security mode and test it through the native library on both iOS and Android before promising support. Browser allowed-origin rules are not a substitute for native-user authorization.

Handle the app lifecycle

• Pause, resume, and release playback in response to navigation and AppState changes.
• Decide whether background audio, picture in picture, casting, and lock-screen controls are part of the product.
• Show useful loading and retry states for slow networks or expired access.
• Send only documented playback measurements if your app needs analytics; a custom native player does not emit the web player's complete event stream automatically.

Test on target devices

• Authorized user, unauthorized user, expired link, and revoked access.
• Captions, alternate audio, seeking, rotation, interruption, and resume.
• Wi-Fi to mobile-data transitions and constrained bandwidth.
• Supported iOS and Android versions on physical devices.
• Token redaction in logs, crash reports, and analytics tools.