1

我想在我的应用程序中使用反应播放器库

import React, { useEffect, useRef } from "react";
import ReactPlayer from "react-player";
import { useSelector } from "../../../redux/useSelector";

const VIDEO_URL =
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";

export const Player: React.FC = React.memo(() => {
  const player = React.useRef<any>(null);

  const targetTimestamp = useSelector((state) => {
    const {
      timestamps: { selectedTimestamp },
    } = state;
    return (selectedTimestamp && selectedTimestamp.timestamp) || 0;
  });

  useEffect(() => {
    console.log(player.current);
    player.current && player.current.seekTo(targetTimestamp );
  }, [targetTimestamp]);

  return (
    <ReactPlayer
      ref={player}
      url={VIDEO_URL}
      controls
      width={1280}
      height={720}
    />
  );
});

console.log(player.current);有效,但在下一行我得到了错误

未捕获的类型错误:无法读取未定义的属性“seekTo”

在此处输入图像描述

怎么了?我这里不能用useRef?我应该制作Player类组件吗?如何修复它并使其工作?

4

0 回答 0