title | description | sourceCodeUrl | packageName | platforms | |||
---|---|---|---|---|---|---|---|
Video |
A library that provides an API to implement video playback in apps. |
expo-video |
|
import APISection from '/components/plugins/APISection';
import { APIInstallSection } from '/components/plugins/InstallSection';
import { SnackInline } from '~/ui/components/Snippet';
info
expo-video
is a new, experimental library that aims to replace theVideo
component fromexpo-av
with a more modern and reliable implementation. If you are looking for a more stable API, useexpo-av
until this library has stabilized.
expo-video
is a cross-platform, performant video component for React Native and Expo with Web support.
Here's a simple example of a video with a play and pause button.
<SnackInline label='Video' dependencies={['expo-video']}>
import { useVideoPlayer, VideoView } from 'expo-video';
import { useEffect, useRef, useState } from 'react';
import { PixelRatio, StyleSheet, View, Button } from 'react-native';
const videoSource =
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
export default function VideoScreen() {
const ref = useRef(null);
const [isPlaying, setIsPlaying] = useState(true);
const player = useVideoPlayer(videoSource, (player) => {
player.loop = true;
player.play();
});
useEffect(() => {
const subscription = player.addListener('playingChange', (isPlaying) => {
setIsPlaying(isPlaying);
});
return () => {
subscription.remove();
};
}, [player]);
return (
<View style={styles.contentContainer}>
<VideoView
ref={ref}
style={styles.video}
player={player}
allowsFullscreen
allowsPictureInPicture
/>
<View style={styles.controlsContainer}>
<Button
title={isPlaying ? 'Pause' : 'Play'}
onPress={() => {
if (isPlaying) {
player.pause();
} else {
player.play();
}
setIsPlaying(!isPlaying);
}}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
contentContainer: {
flex: 1,
padding: 10,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 50,
},
video: {
width: 350,
height: 275,
},
controlsContainer: {
padding: 10,
},
});
import { VideoView, useVideoPlayer } from 'expo-video';