video.mdx

title	description	sourceCodeUrl	packageName	platforms
Video	A library that provides an API to implement video playback in apps.	https://github.com/expo/expo/tree/main/packages/expo-video	expo-video	android ios web

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.

Installation

Usage

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,
  },
});

API

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

Unified API

The rest of the API on the Video component ref is the same as the API for Audio.Sound - see the AV documentation for further information.