Skip to content

Instantly share code, notes, and snippets.

@lucky-c
Last active August 27, 2024 17:59
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'
},
});
@hislordshipprof
Copy link

hislordshipprof commented Jan 7, 2023 via email

@TrueGeek
Copy link

I believe line 11 should be:

let videoHeight = videoWidth / 11 * 9 ;

@lucky-c
Copy link
Author

lucky-c commented Mar 3, 2024

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 !

@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

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