How can I determine if a video has just finished using expo.video? ReactNative/Expo.io

4.3k views Asked by At

For instance if I have the component:

import React, { Component } from 'react';
import { Video } from 'expo';
let styles = require('../stylesheet.js');
export default class Player extends Component {
  render(){
    return(
     <Video
      ref={this._handleVideoRef}
      source={require(//file)}
      rate={1.0}
      volume={1.0}
      muted={false}
      useNativeControls
      resizeMode="cover"
      shouldPlay
      style={styles.player} />
      )
  }
}

I see in the docs(https://docs.expo.io/versions/latest/sdk/av.html) to use "playbackstatus.didJustFinish" and onPlaybackStatusUpdate but their example did not make much sense to me. Can anyone tell me how to determine if the video has ended using my code?

2

There are 2 answers

0
Adam Katz On

mauriii answer never worked for me because onPlaybackStatusUpdate wasnt called when playbackStatus.didJustFinish turned to true, however i noticed after console.logging playbackstatus that there are two other fields durationMillis and positionMillis so when those values are equal we know the video is complete

so to update on that answer

export default class Player extends Component {
  _onPlaybackStatusUpdate = playbackStatus => {
    if (playbackStatus.durationMillis === playbackStatus.positionMillis)
      // The player has just finished playing and will stop.
  };

  render(){
    return(
      <Video
        ref={this._handleVideoRef}
        source={require(//file)}
        onPlaybackStatusUpdate=
          {(playbackStatus) => this._onPlaybackStatusUpdate(playbackStatus)}/>
        resizeMode="cover"
        style={styles.player}
    );
  }
}
2
mauriii On

In case anyone else comes looking for an answer, the following is a combination of OP and docs(https://docs.expo.io/versions/latest/sdk/av.html):

import React, { Component } from 'react';
import { Video } from 'expo';

export default class Player extends Component {
  _onPlaybackStatusUpdate = playbackStatus => {
    if (playbackStatus.didJustFinish)
      // The player has just finished playing and will stop.
  };

  render(){
    return(
      <Video
        ref={this._handleVideoRef}
        source={require(//file)}
        onPlaybackStatusUpdate=
          {(playbackStatus) => this._onPlaybackStatusUpdate(playbackStatus)}/>
        resizeMode="cover"
        style={styles.player}
    );
  }
}