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.