2021年10月2日 星期六

[react native, video] How to play network and assets video using expo-av

How to play network and assets video using expo-av

井民全, Jing, mqjing@gmail.com

[hybrid, cross] Ionic, React Native, Cordova, Electron

The expo-av[1] is a very popular module for playing video/audio in React-native. The module almost got 5,000 downloads per week. The official site also provides a comprehensive example playlist-example[3] for reference. However, it's quite complex to evaluate for a beginner. Fortunately, Mr. Eyal provides a very good document[2] for users. It's very easy and just 4 steps to set up and then you are ready to go. 

Here, I made a slight modification altering the class component code to the new function component. See the result.





Fig. 1. The network video is played on my iPhone using the expo-av module.


GitHub: Source

1. Quick

expo init VideoPlayer

cd VideoPlayer

expo install expo-av


vi VideoPlayer/app.js   # coding

expo start 


2. Detail

2.1. Create project and install packages

expo init VideoPlayer

cd VideoPlayer

expo install expo-av


2.2. Coding

The code that is blue colored is added from the template.

File: App.js

import { StatusBar } from 'expo-status-bar';

import React from 'react';

import { StyleSheet, Text, View, Dimensions } from 'react-native';


import { Audio, Video } from 'expo-av';


export default function App() {

  return (

    <View style={styles.container}>

      <Text>Open up App.js to start working on your app!</Text>

      <Video

  source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}

          shouldPlay

  resizeMode="cover"

  style={{ width:300, height: 300 }}

/>

      <StatusBar style="auto" />

    </View>

  );

}


const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});





2.3. Run

expo start


Result


2.4. Clean

cd $ProjectFolder   # now, at VideoPlayer

rm -fr node_modules

rm -fr ./ios/Pods


# reinstall packages

# yarn install

# expo start


3. References

  1. https://github.com/expo/expo/tree/master/packages/expo-av

  2. https://medium.com/front-end-weekly/how-to-play-video-with-react-native-and-expo-30523bfcb311

  3. https://github.com/expo/playlist-example
at