Skip to content

Instantly share code, notes, and snippets.

@lucky-c
Last active March 2, 2025 22:19
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'
},
});
@iamzainn
Copy link

iamzainn commented May 6, 2024

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

@devignr
Copy link

devignr commented Dec 26, 2024

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

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