Last active
August 27, 2024 17:59
-
-
Save lucky-c/91d96977f913d54f723b64c34ce03fac to your computer and use it in GitHub Desktop.
React Native: Expo video HLS streaming sample
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
commented
Jan 7, 2023
via email
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment