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 package that aims to replace the
Video
component from expo-av with a more modern and reliable implementation. If you are concerned about using a new package, consider expo-av until expo-video has stabilized.
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/pause button.
<SnackInline label='Video' dependencies={['expo-video']}>
import { useVideoPlayer, VideoView, VideoSource } from 'expo-video';
import React, { useEffect, useRef, useState } from 'react';
import { PixelRatio, StyleSheet, View, Button } from 'react-native';
const videoSource: VideoSource =
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
export default function VideoScreen() {
const ref = useRef<VideoView>(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';