Bit late to answer but anyone seeking the solution yet, can either use React Native Video or Can use Iframe from package react-native-vimeo-iframe
Will share the code to use with react-native-vimeo-iframe
- Import the necessary components and hooks:
import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Vimeo } from 'react-native-vimeo-iframe';
- Create a functional component called VideoPlayer that takes a videoId prop as input:
const VideoPlayer = ({ videoId }) => {
// ...
}
- Define a state variable and a corresponding setter for each event that you want to handle using the useState hook:
const [isPlaying, setIsPlaying] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const [played, setPlayed] = useState(0);
const [loaded, setLoaded] = useState(0);
const [volume, setVolume] = useState(1);
const [error, setError] = useState(null);
- Define event handler functions for each event that you want to handle:
const handleReady = () => {
console.log('Player is ready');
};
const handlePlay = () => {
console.log('Video started playing');
setIsPlaying(true);
};
const handlePause = () => {
console.log('Video paused');
setIsPlaying(false);
};
const handleEnded = () => {
console.log('Video ended');
setIsPlaying(false);
};
const handleTimeUpdate = ({ currentTime, duration }) => {
console.log('Current time:', currentTime);
setCurrentTime(currentTime);
};
const handleProgress = ({ played, loaded }) => {
console.log('Played:', played, 'Loaded:', loaded);
setPlayed(played);
setLoaded(loaded);
};
const handleSeeked = () => {
console.log('Seeked to new position');
};
const handleVolumeChange = (newVolume) => {
console.log('Volume changed to:', newVolume);
setVolume(newVolume);
};
const handleError = (error) => {
console.log('Error:', error);
setError(error);
};
- Return Vimeo player component with all the required props and event handlers.
return (
<View style={styles.container}>
<Vimeo
videoId={videoId}
autoplay={false}
loop={false}
controls={true}
onReady={handleReady}
onPlay={handlePlay}
onPause={handlePause}
onEnded={handleEnded}
onTimeUpdate={handleTimeUpdate}
onProgress={handleProgress}
onSeeked={handleSeeked}
onVolumeChange={handleVolumeChange}
onError={handleError}
/>
<Text style={styles.text}>
{isPlaying ? 'Playing' : 'Paused'} at {currentTime} seconds
</Text>
<Text style={styles.text}>
Played: {played.toFixed(2)}, Loaded: {loaded.toFixed(2)}
</Text>
<Text style={styles.text}>Volume: {volume.toFixed(2)}</Text>
{error && <Text style={styles.text}>Error: {error.message}</Text>}
</View>
);
- Define StyleSheet
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
},
text: {
color: '#fff',
textAlign: 'center',
marginVertical: 10,
},
});
export default VideoPlayer;
