Skip to content

Instantly share code, notes, and snippets.

@lucky-c
Last active August 19, 2025 05:43
Show Gist options
  • Save lucky-c/91d96977f913d54f723b64c34ce03fac to your computer and use it in GitHub Desktop.
Save lucky-c/91d96977f913d54f723b64c34ce03fac to your computer and use it in GitHub Desktop.
React Native: Expo video HLS streaming sample
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'
},
});
@zhe-student-tafesa
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment