UseEffect 和视频元素未按预期工作

Question

我有一个视频元素，它有一个用于获取其属性的引用。我认为这是相当标准的东西。问题是当效果运行时，视频元素（在 videoRef.current 中）被记录，并且其持续时间属性为 311，但在其下方我尝试记录持续时间属性本身不起作用。它记录 NaN。

这是与问题相关的代码。

const Home = () => {
    const [videoState, setVideoState] = useState({
        playing: false,
        currentTime: 0,
        volume: "50%",
        playbackSpeed: 1,
        totalTime: 0,
    })
    const videoRef = useRef<HTMLVideoElement>(null)

    

    useEffect(() => {
        if (videoRef.current) {
            console.dir(videoRef.current)
            console.log(+videoRef.current.duration)
            // console.log(typeof(videoRef.current.duration))
            // @ts-ignore
            setVideoState((prev) => ({ ...prev, totalTime: videoRef.current.duration }))
        }
    }, [])

    return (
        <div className='p-8 bg-red-500 w-full h-full relative'>
            <div className='relative w-fit h-fit'>
                <video
                    src={fall}
                    ref={videoRef}
                    // onPlaying={handleTimeUpdate}
                    onTimeUpdate={handleTimeUpdate}
                ></video>
        </div>
    )
}
export default Home

输出

在视频对象中，有一个持续时间的数字

我不明白为什么注销时视频对象的持续时间为 311，但直接记录时为 NaN。

我希望第二个日志能够记录持续时间数字。

Answer 1

你可以看看这个问题=> 从文件中单独检索 HTML5 视频时长

问题在于加载元数据后，持续时间属性才可用。你需要等待。

尝试使用这个useEffect

useEffect(() => {
        const handleDurationChange = () => {
            if (videoRef.current) {
                console.dir(videoRef.current);
                console.log(videoRef.current.duration);
                setVideoState((prev) => ({ ...prev, totalTime: videoRef.current.duration }));
            }
        };

        if (videoRef.current) {
            videoRef.current.addEventListener('durationchange', handleDurationChange);
        }

        return () => {
            if (videoRef.current) {
                videoRef.current.removeEventListener('durationchange', handleDurationChange);
            }
        };
    }, []);