React Native: Expo video HLS streaming sample

app.js

import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import { Video } from 'expo';

export default class App extends React.Component {
  render() {

    // Set video dimension based on its width, so the video doesn't stretched on any devices.
    // The video dimension ratio is 11 : 9 for width and height
    let videoWidth = Dimensions.get('window').width;
    let videoHeight = videoWidth / 11 * 9;

    return (
      <View style={styles.container}>
        <Video
          source={{ uri: 'http://qthttp.apple.com.edgesuite.net/1010qwoeiuryfg/sl.m3u8' }}
          rate={1.0}
          volume={1.0}
          isMuted={true}
          resizeMode="cover"
          shouldPlay
          style={{ width: videoWidth, height: videoHeight }}/>

        {/* Replace this with comment section like Youtube */}
        <Text>width * height = {videoWidth} * {videoHeight}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
});

Hi where did you host the video to convert it into hls stream. im wanting to do it in my current project where the video will play like netflix nd youTube, i would be glad if u can assist

Hi @hislordshipprof the m3u8 link above actually aren't mine, therefore not hosted by me and I don't know how they host the video.

But in case you are still need guide, you can start by create m3u8 file by converting a mp4 file using FFMPEG library on terminal. Then host the m3u8 using your choice of cloud server and make sure the it is publicly accessible.
You can check these guides to convert the file:

• https://mayur-solanki.medium.com/how-to-create-mpd-or-m3u8-video-file-from-server-using-ffmpeg-97e9e1fbf6a3
• https://superuser.com/questions/1292392/how-to-generate-m3u8-from-a-list-of-files-in-ffmpeg

Hope it helps!

Thanks for the information

…

On Mon, 2 Jan 2023, 8:26 am Lucky Christiawan ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Hi @hislordshipprof <https://github.com/hislordshipprof> the m3u8 link above actually aren't mine, therefore not hosted by me and I don't know how they host the video. But in case you are still need guide, you can start by create m3u8 file by converting a mp4 file using FFMPEG library on terminal. Then host the m3u8 using your choice of cloud server and make sure the it is publicly accessible. You can check these guides to convert the file: - https://mayur-solanki.medium.com/how-to-create-mpd-or-m3u8-video-file-from-server-using-ffmpeg-97e9e1fbf6a3 - https://superuser.com/questions/1292392/how-to-generate-m3u8-from-a-list-of-files-in-ffmpeg Hope it helps! — Reply to this email directly, view it on GitHub <https://gist.github.com/91d96977f913d54f723b64c34ce03fac#gistcomment-4420918> or unsubscribe <https://github.com/notifications/unsubscribe-auth/APVT3KA2J7JDA4VJL76PXGLWQKGJTBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVA4TANJXGAYDKNVHORZGSZ3HMVZKMY3SMVQXIZI> . You are receiving this email because you were mentioned. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

I believe line 11 should be:

let videoHeight = videoWidth / 11 * 9 ;

I believe line 11 should be:

let videoHeight = videoWidth / 11 * 9 ;

oh wow after a long time I didn't realized that, I will update it.
Thank you @TrueGeek !

https://streambtw.com/iframe/e1.php
I want to convert this link to this format so that my video run that

I'm getting error: Module '"expo"' has no exported member 'Video'
I've been trying for 2 days to get React Native/Expo to play an HLS video and am getting nowhere

I'm getting error: Module '"expo"' has no exported member 'Video' I've been trying for 2 days to get React Native/Expo to play an HLS video and am getting nowhere

same here but for a few hours only - did you manage to make it work?

Hi where did you host the video to convert it into hls stream. im wanting to do it in my current project where the video will play like netflix nd youTube, i would be glad if u can assist

Use https://vimeo.com/.
You upload mp4, which will give us m3u8 link.