How to play network and assets video using expo-video-player
井民全, Jing, mqjing@gmail.com
GitHub: Source
[hybrid, cross] Ionic, React Native, Cordova, Electron
The expo-video-player[1] is a video wrapper component that is based on the expo-av and combined with a slide UI control. It's convenient. If the purpose is to play, pause, replay and change the video position, the expo-video-player is a good choice.
Enjoy!
by Jing.
Fig. 1. Show network video on my iPhone.
1. Quick
expo init VideoPlayer # create a new project cd VideoPlayer expo install expo-av @react-native-community/slider # install dependencies expo install expo-video-player # install dependencies
expo start |
Table of contents
1. Quick
2. Detail
2.1. Create a new project from blank TypeScript template
2.2. Install
2.3. Code (TypeScript)
3. Run
4. References
2. Detail
2.1. Create a new project from a blank TypeScript template
Choose blank (TypeScript)
2.2. Install
cd VideoPlayer expo install expo-av @react-native-community/slider expo install expo-video-player |
2.3. Code (TypeScript)
The usage was colored in blue (see the code).
File: app.tsx
import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native';
import { Video } from 'expo-av' import VideoPlayer from 'expo-video-player'
export default function App() { return ( <View style={styles.container}>
<VideoPlayer videoProps={{ shouldPlay: true, resizeMode: Video.RESIZE_MODE_CONTAIN, // ❗ source is required https://docs.expo.io/versions/latest/sdk/video/#props source: { uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', }, }} />
<Text>Open up App.tsx to start working on your app!</Text> <StatusBar style="auto" /> </View> ); }
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); |
3. Run
Result
4. References
https://www.npmjs.com/package/expo-video-player
https://docs.expo.dev/versions/latest/sdk/video/#props
