DynTube API
  • Welcome!
  • Key Concepts
  • Quick Start
  • Reference
    • Videos
      • Video Upload via File (Server Side)
      • Video Upload via URL (server side)
      • HTML-Form Client Side Video Uploads
      • Get Video Status
      • Get Videos
      • Get Video
      • Update Video
      • Delete Video
      • Download Original Video
      • Get Video for Mobile App/Custom Player
      • Update Video Image
      • Add Video Captions/Chapters/Subtitles
      • Delete Video Captions/Subtitles/Chapters
      • Create Expirable Links
      • Get Collected Emails
      • Setting Up Webhooks
      • Copy call-to-action (CTA) to Videos
      • Token Authentication
    • Projects
      • Create Project
      • Update a Project
      • Get Projects
      • Get a Project
      • Delete a Project
      • Set default CTA for Project
    • Live Streaming
      • Create a Live Stream
      • Update a Live Stream
      • Get Live Streams
      • Get a Live Stream
      • Count Live Streams
      • Live Streams Limit
      • Get Live Streaming Recording
      • Delete a Live Stream
      • Service and Regions for live streams
    • Channels
      • Get Channels
      • Get Channel
      • Delete Channel
    • Subscriptions
      • Create a Plan
      • Create a Member
      • Attach Plan To Member
      • Get Plans
      • Get Members
      • Get Member's Plans
      • Delete a Plan
    • Analytics
      • Use your User Ids in Analytics
      • Get Video Analytics
    • Javascript Events Methods
      • Plain Javascript Events & Methods
      • Control the Player using React
      • Control the Player in Vue.js
    • Developer Resources
      • How to embed DynTube player in Next.Js
      • How to embed the video player in React
      • How to play DynTube videos in React Native
      • ExoPlayer app to play HLS videos
      • How to embed videos & channels dynamically
      • How to Import Vimeo Videos into DynTube
Powered by GitBook
On this page
  1. Reference
  2. Developer Resources

How to play DynTube videos in React Native

Learn how to integrate DynTube video playback into your React Native application with ease. Follow our step-by-step guide to obtain the necessary M3U8 URLs and seamlessly incorporate them into an app.

To utilize DynTube within a React Native application, acquiring the M3U8 URLs is essential, which can be accomplished by either accessing the dashboard or leveraging our API. Once obtained, these links can be utilized to facilitate playback within the application.

To use an M3U8 URL in a React Native app, you can use the react-native-video library. Here are the steps to get started:

Install the react-native-video library using npm or yarn:

npm install --save react-native-video

Link the library to your React Native project using the following command:

react-native link react-native-video

In your React Native component, import the Video component from the react-native-video library:

import Video from 'react-native-video';

In your component's render() method, add the Video component and pass the M3U8 URL as the source prop:


render() {
  return (
    <Video
      source={{ uri: 'https://[api-endpoint].dyntube.com/v1/live/videos/8Gg93lfTg.m3u8' }}
      style={{ width: 320, height: 240 }}
      controls={true}
    />
  );
}

In the example above, the controls prop is set to true to enable video playback controls.

Run your React Native app using react-native run-android or react-native run-ios and test the video playback using the M3U8 URL.

That's it! You should now be able to use DynTube's M3U8 URL to play video in your React Native app using the react-native-video library.

PreviousHow to embed the video player in ReactNextExoPlayer app to play HLS videos

Last updated 3 months ago