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:

• When a chapter button is clicked, the video should seek to the specified time and pause at that point.
• The video should not start playing automatically unless it was previously playing.

Issue:

• The video starts playing automatically when I click on a chapter button, which is not the desired behavior.

What I’ve Tried:

• I’ve checked the videoRef.current.play() call, but it seems to be causing the video to play automatically.