javascriptreactjsvideohtml5-video

React custom video player with a chapters don't work


Custom Video Player Chapters Feature Issues - Video Starts Playing Automatically

I’ve created a custom video player in React with a chapters feature, but I’m encountering an issue where the video starts playing automatically when I click on a chapter button, even if it was previously paused. I want the video to seek to the chapter time and pause at that point, but it currently starts playing from the chapter time.

Here is the code for my VideoPlayer component:

import React, { useState, useRef } from 'react';
import './style.css';

const VideoPlayer = ({ src, chapters }) => {
    const videoRef = useRef(null);
    const [currentChapter, setCurrentChapter] = useState(null);

    const handleChapterClick = (chapter) => {
        if (videoRef.current) {
            videoRef.current.currentTime = chapter.time;
            console.log(videoRef.current.currentTime);
            videoRef.current.play();
        }
        setCurrentChapter(chapter);
    };

    return (
        <div className="video-container">
            <video ref={videoRef} controls className="video-player">
                <source src={src} type="video/mp4" />
            </video>
            <div className="chapters">
                {chapters.map((chapter, index) => (
                    <button key={index} onClick={() => handleChapterClick(chapter)}>
                        {chapter.title}
                    </button>
                ))}
            </div>
        </div>
    );
};

export default VideoPlayer;

What I’m Trying to Achieve:

Issue:

What I’ve Tried:


Solution

  • check your video source. it works for me