Skip to main content

​
expo-video

Version: 55.0.6 A cross-platform, performant video component for React Native and Expo with Web support.

​
Installation

npx expo install expo-video

​
Usage

import { VideoView, useVideoPlayer } from 'expo-video';
import { useEffect, useRef } from 'react';

function App() {
  const videoSource = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
  
  const player = useVideoPlayer(videoSource, (player) => {
    player.loop = true;
    player.play();
  });

  return (
    <VideoView
      style={{ width: 400, height: 300 }}
      player={player}
      allowsFullscreen
      allowsPictureInPicture
    />
  );
}

​
API Reference

​
VideoView Props

​
player
VideoPlayer
required
Video player instance created with useVideoPlayer
​
nativeControls
boolean
default:"true"
Show native playback controls
​
allowsFullscreen
boolean
Enable fullscreen mode
​
allowsPictureInPicture
boolean
Enable picture-in-picture mode
​
contentFit
'contain' | 'cover' | 'fill'
default:"contain"
Video scaling mode

​
useVideoPlayer Hook

​
useVideoPlayer(source, setup)
(source: VideoSource, setup?: (player: VideoPlayer) => void) => VideoPlayer
Creates a video player instance
const player = useVideoPlayer(videoUri, (player) => {
  player.volume = 0.5;
  player.play();
});

​
VideoPlayer Methods

​
player.play()
() => void
Starts playback
​
player.pause()
() => void
Pauses playback
​
player.replace(source)
(source: VideoSource) => void
Replaces current video source

​
VideoPlayer Properties

​
player.playing
boolean
Whether video is currently playing
​
player.muted
boolean
Audio mute state
​
player.volume
number
Volume level (0-1)
​
player.loop
boolean
Whether video should loop
​
player.currentTime
number
Current playback position in seconds
​
player.duration
number
Total video duration in seconds

​
Examples

​
Basic Video Player

import { VideoView, useVideoPlayer } from 'expo-video';

function VideoPlayer() {
  const player = useVideoPlayer(
    'https://example.com/video.mp4',
    (player) => player.play()
  );

  return (
    <VideoView
      player={player}
      style={{ width: '100%', height: 300 }}
      nativeControls
    />
  );
}

​
Custom Controls

import { VideoView, useVideoPlayer } from 'expo-video';
import { useState } from 'react';
import { Button, View } from 'react-native';

function CustomVideoPlayer() {
  const player = useVideoPlayer('https://example.com/video.mp4');
  const [isPlaying, setIsPlaying] = useState(false);

  const togglePlayback = () => {
    if (player.playing) {
      player.pause();
    } else {
      player.play();
    }
    setIsPlaying(!isPlaying);
  };

  return (
    <View>
      <VideoView
        player={player}
        style={{ width: '100%', height: 300 }}
        nativeControls={false}
      />
      <Button
        title={isPlaying ? 'Pause' : 'Play'}
        onPress={togglePlayback}
      />
    </View>
  );
}

​
Platform Support

PlatformSupported
iOS✅
Android✅
Web✅

​
Resources