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

Share Improve this question Follow edited Feb 11, 2020 at 17:17 David Schumann 14.8k1313 gold badges8383 silver badges105105 bronze badges asked Aug 26, 2017 at 17:01 narahannarahan 41111 gold badge44 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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