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?
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.
import { CameraRoll } from 'react-native'; ... ... await CameraRoll. saveToCameraRoll(photo. uri);
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}
);
}
}
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}
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With