Closed darias08 closed 2 months ago
Also, how can I use the player Function for seekTo
? I want to have a button that displays a certain time for a user to jump to and I am having trouble understanding how can I use that function.
Okay, so I am understanding a little more about the seekTo
function. However, I am trying to save the users video state when they navigate to a different screen with the same youtube video.
So for example, I have two separate components one is the Details screen
and the other is Modal
so if user were to watch the first 10 seconds of a video and they clicked on the video. It navigate them to the modal
screen with the time they have left off from the video.
So I am using this as my code, but it leaves the video in a infinite pause at that time and I want it to just play from that point.
Detail page
return(
<TouchableOpacity
activeOpacity={0.8}
onPress={() => {
setModalVisible(!isModalVisible);
setClickedIndex(index);
//Getting current time for video
playerRef.current?.getCurrentTime().then(
currentTime => setCurrentTimeVideo({currentTime})
)
}}>
<View style={{width: 370, borderRadius: 5, overflow: 'hidden' , height: 205, marginLeft: 10, backgroundColor: COlORS.dark_gray}} pointerEvents='none'>
<YoutubePlayer
height={370}
mute={true}
ref={playerRef}
videoId={item.video_id}
onChangeState={onStateChange}
initialPlayerParams={{ controls: false, modestbranding: false }}
contentScale={0.8}
play={playing}
onReady={onReady}
webViewStyle={ {opacity:0.99} }
forceAndroidAutoplay={true}
/>
</View>
</TouchableOpacity>
)
Modal
const onStateChange = useCallback(state => {
if (state === 'ended') {
setPlaying(false);
}
if(state === 'playing') {
playerRef.current?.seekTo(25, true) <=== This is where it keeps it pausing at and I just want it to continue from that point.
}
if(state === 'paused') {
}
}, []);
return (
<YoutubePlayer
height={300}
play={playing}
mute
ref={playerRef}
videoId={item.video_id}
onChangeState={onStateChange}
initialPlayerParams={{
controls: false,
modestbranding: false,
}}
/>
)
this not really an issue, you can use something similar to this : https://lonelycpp.github.io/react-native-youtube-iframe/elapsed-time
Hello,
I am trying to create a custom time bar for the video play length. I am having trouble finding a good resource library that can help me with this issue, but most of them I have been finding are from
react-native-videoplayer
. Is there any good resources you have in mind? I just don't want to use the youtube default time bar because it has some weird effects to it.