带有章节的React自定义视频播放器不起作用

自定义视频播放器章节功能问题-视频自动开始播放

我在React中创建了一个带有章节功能的自定义视频播放器,但我遇到了一个问题,当我点击章节按钮时,视频会自动开始播放,即使它之前已暂停。我希望视频能找到章节时间并在该点暂停,但它目前是从章节时间开始播放的。

这是我的代码 VideoPlayer 组件:

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;

我试图实现的目标:

• 当点击章节按钮时,视频应寻找指定时间并在该点暂停。
• 除非之前正在播放,否则视频不应自动开始播放。

问题:

• 当我点击章节按钮时,视频会自动播放,这不是我想要的行为。

我尝试过的:

• 我查过了 videoRef.current.play() 呼叫,但似乎导致视频自动播放。