Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 574
narahan Avatar asked Aug 26 '17 17:08

narahan


People also ask

Is Expo worth it React Native?

Here are some good reasons to use Expo to build your React Native app. If you are given a project that needs rapid development, and you have picked React Native to build the cross-platform app, Expo is the best fit for you. With Expo, you can build and deploy React Native apps for both iOS and Android with ease.

How do you save a photo from camera expo?

import { CameraRoll } from 'react-native'; ... ... await CameraRoll. saveToCameraRoll(photo. uri);


2 Answers

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}
    );
  }
}
like image 135
mauriii Avatar answered Oct 06 '22 07:10

mauriii


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}
    );
  }
}
like image 36
Adam Katz Avatar answered Oct 06 '22 08:10

Adam Katz