expo-video
Video component for Expo/React Native
Last updated 4 months ago by deebov .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install expo-video 
SYNC missed versions from official npm registry.

Video component for Expo/React Native

This library is a wrapper around Expo's expo-av library. Because Expo's video api is not really simple this component was built to make it simpler.

Install

yarn add expo-video

Usage

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Video } from 'expo-video';

export default function App() {
  const [paused, setPaused] = useState(false);
  const [volume, setVolume] = useState(1);
  const videoRef = useRef<Video>(null);

  const onBuffer = (buffering: boolean) => {
    console.log('buffering', buffering);
  };

  const onFinish = () => {
    console.log('FINISHED');
  };

  const onProgress = (progress: Progress) => {
    console.log(progress.percent);
  };

  const onPlay = (playing: boolean) => {
    console.log('playing', playing);
  };

  const onVolumeChange = (volume: number) => {
    console.log('volume', volume);
  };

  const increaseVolume = () => {
    setVolume((oldVolume) => Math.min(oldVolume + 0.1, 1));
  };

  const decreaseVolume = () => {
    setVolume((oldVolume) => Math.max(oldVolume - 0.1, 0));
  };

  const rePlay = () => videoRef.current?.replayAsync();
  const fullscreen = () => videoRef.current?.presentFullscreenPlayer();
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Button title="Play" onPress={() => setPaused((state) => false)} />
        <Button title="Pause" onPress={() => setPaused((state) => true)} />
        <Button title="Toggle" onPress={() => setPaused((state) => !state)} />
        <Button title="Replay" onPress={rePlay} />
        <Button title="Fullscreen" onPress={fullscreen} />
        <Button title="Increase" onPress={increaseVolume} />
        <Button title="Decrease" onPress={decreaseVolume} />
      </View>
      <Video
        ref={videoRef}
        paused={paused}
        volume={volume}
        source={{ uri: 'https://your-domain.com/video.mp4' }}
        progressUpdateIntervalMillis={10}
        style={styles.video}
        onPlay={onPlay}
        onBuffer={onBuffer}
        onVolumeChange={onVolumeChange}
        onProgress={onProgress}
        onEnd={onFinish}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  video: {
    width: '50%',
    height: 200,
  },
});

Props

Props extends Expo's expo-av props. So you can pass any prop that expo-av takes.

Prop Description Type Default
paused If true video will be paused, if false then video will be started from the position it was paused Boolean false
bufferUpdateInterval Waits inteval milliseconds before comparing previous isBuffering state and current isBuffering. If changed, then calls onBuffer if provided Number (milliseconds) 10
onPlay(isPlaying:boolean) Gets called when isPlaying status is changed Callback
onBuffer(isBuffering:boolean) Gets called when isBuffering status is changed Callback
onProgress(progress:Progress) Gets called when position milliseconds are changed or within progressUpdateIntervalMillis interval time Callback
onPlayableProgress(playableProgress:PlayableProgress) Gets called when playable duration is changed or within progressUpdateIntervalMillis interval time Callback
onVolumeChange(volume:number) Gets called when volume is changed Callback
onEnd(isPlaying:boolean) Gets called when video ends Callback

Types

Progress

type Progress = {
  progress: number;
  percent: number;
}

PlayableProgress

type PlayableProgress = {
  playableDuration: number;
  playableDurationPercent: number;
}

Todo

  • [ ] Provide more examples

Current Tags

  • 1.0.2                                ...           latest (4 months ago)

3 Versions

  • 1.0.2                                ...           4 months ago
  • 1.0.1                                ...           4 months ago
  • 1.0.0                                ...           4 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (2)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |