expo-video

Cross-platform video player component with playback controls

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

Platform	Supported
iOS	✅
Android	✅
Web	✅

Resources

• Official Documentation
• GitHub Repository