Abdullah Assoli
Abdullah Assoli

Reputation: 37

why videojs react player seeked to zero always when change

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

Answers (0)

Related Questions