Reputation: 37
I am using React with Laravel as the backend and I receive the video name from Laravel but always when I change the video duration the video currentTime always go to zero
import React, { Component } from "react";
import VideoPlayer from "react-video-js-player";
class SingleCourse extends Component {
player = {};
state = {
video: {
src: "http://localhost:8000/video/course/166168673420.mp4",
poster:
"https://images.unsplash.com/photo-1661997011608-a8bc1a4da810?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80",
},
};
onPlayerReady(player) {
console.log("Player is ready: ", player);
this.player = player;
}
onVideoPlay(duration) {
console.log("Video played at: ", duration);
}
onVideoPause(duration) {
console.log("Video paused at: ", duration);
}
onVideoTimeUpdate(duration) {
console.log("Time updated: ", duration);
}
onVideoSeeking(duration) {
console.log("Video seeking: ", duration);
}
onVideoSeeked(from, to) {
console.log(`Video seeked from ${from} to ${to}`);
}
onVideoEnd() {
console.log("Video ended");
}
render() {
return (
<div>
<VideoPlayer
controls={true}
src={this.state.video.src}
poster={this.state.video.poster}
width="720"
height="420"
onReady={this.onPlayerReady.bind(this)}
onPlay={this.onVideoPlay.bind(this)}
onPause={this.onVideoPause.bind(this)}
onTimeUpdate={this.onVideoTimeUpdate.bind(this)}
onSeeking={this.onVideoSeeking.bind(this)}
onSeeked={this.onVideoSeeked.bind(this)}
onEnd={this.onVideoEnd.bind(this)}
/>
</div>
);
}
}
export default SingleCourse;
when I used video as Import from React it would work but with Laravel localhost, it missed up the problem in here src: "http://localhost:8000/video/course/166168673420.mp4", src with http//localhost doesn't work, src with react import element it will work
Upvotes: 0
Views: 230