如何在视频在 expo-video-player 上结束时发出警报?

时间:2021-06-27 01:46:13

标签: react-native expo expo-av

带有自定义控件的 expo-video-player 存储库对我非常有帮助 (this is the link of the repo I based from)。我想知道如何制作一个功能,在视频结束时我可以做一些事情(比如“视频结束”警报)。

代码:这是我迄今为止尝试过的:

const updatePlaybackCallback = (status: AVPlaybackStatus) => {
 props.playbackCallback(status)
   if (status.didJustFinish){
     alert('END!');
   }
}

return (
 <View style={styles.container}>
   <VideoPlayer
     videoProps={{
       shouldPlay: false,
       resizeMode: Video.RESIZE_MODE_COVER,
       source: {
         uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
       },
       ref: refVideo2,
     }}
     onPlaybackStatusUpdate={updatePlaybackCallback}
     fullscreen={{
       inFullscreen: isFullscreen,
       enterFullscreen: async () => {
         setStatusBarHidden(true, 'fade')
         setFullscreen(true)
         await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT)
       },
       exitFullscreen: async () => {
         setStatusBarHidden(false, 'fade')
         setFullscreen(false)
         await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT)
       },
     }}
     style={{
       videoBackgroundColor: 'black',
       height: isFullscreen ? Dimensions.get('window').width : 160,
       width: isFullscreen ? Dimensions.get('window').height : 320,
     }}
   />
 </View>

我也试过这些,但没有任何作用:

_onPlaybackStatusUpdate = playbackStatus => {
 if (playbackStatus.durationMillis === playbackStatus.positionMillis)
 alert('END!')
 console.log('end')
};

return (
 <View style={styles.container}>
   <VideoPlayer
     videoProps={{
       shouldPlay: false,
       resizeMode: Video.RESIZE_MODE_COVER,
       source: {
         uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
       },
       ref: refVideo2,
     }}
     onPlaybackStatusUpdate={(playbackStatus) => this._onPlaybackStatusUpdate(playbackStatus)}

_onPlaybackStatusUpdate = playbackStatus => {
 if (playbackStatus.didJustFinish)
   alert('END!');
};

return (
 <View style={styles.container}>
   <VideoPlayer
     videoProps={{
       shouldPlay: false,
       resizeMode: Video.RESIZE_MODE_COVER,
       source: {
         uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
       },
       ref: refVideo2,
     }}
     onPlaybackStatusUpdate={(playbackStatus) => this._onPlaybackStatusUpdate(playbackStatus)}

1 个答案:

答案 0 :(得分:0)

代替 updatePlaybackCallbackonPlaybackStatusUpdate 等...

您是否尝试编写 playbackCallback(不是调用它,而是实现它)?

Function which is fired every time onPlaybackStatusUpdate occurs

https://github.com/ihmpavel/expo-video-player/blob/master/lib/props.tsx#L15

https://github.com/ihmpavel/expo-video-player#props