For instance if I have the ponent:

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(.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?

For instance if I have the ponent:

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?

• javascript
• react-native
• expo

2 Answers 2

In case anyone else es looking for an answer, the following is a bination 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}
    );
  }
}

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 plete

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