当我尝试实现视频时，React Mediaplayer 不工作 -

Question

我一直在尝试在我的反应视频组件中插入视频，但我不知道出了什么问题。我一直在尝试不同的解决方案，但我似乎找不到问题（我还是个程序员新手）

import React, { useRef, useEffect } from 'react';

const YourComponent: React.FC = () => {
  const videoRef = useRef<HTMLVideoElement>(null);

  const setPlaybackRate = (rate: number) => {
    if (videoRef.current) {
      videoRef.current.playbackRate = rate;
    }
  };

  useEffect(() => {
    setPlaybackRate(2);
  }, []);

  return (
    <div className="player-wrapper">
      <video
        ref={videoRef}
        controls
        width="100%"
        height="100%"
        loop 
        autoPlay
        muted  
      >
        <source src="./video/SkillsVideo2.mov" type="video/mp4"/>
      </video>
    </div>
  );
};

export default YourComponent;

Answer 1

我在组件文件的顶部导入了视频文件，以确保它在组件中被正确引用和访问。

import React, { useRef, useEffect } from "react";
import myvid from "./assets/[email protected]";

const YourComponent: React.FC = () => {
  const videoRef = useRef<HTMLVideoElement>(null);

  const setPlaybackRate = (rate: number) => {
    if (videoRef.current) {
      videoRef.current.playbackRate = rate;
    }
  };

  useEffect(() => {
    setPlaybackRate(2);
  }, []);

  return (
    <div className="player-wrapper">
      <video
        ref={videoRef}
        controls
        width="100%"
        height="100%"
        loop
        autoPlay
        muted
      >
        <source src={myvid} type="video/mp4" />
      </video>
    </div>
  );
};

export default YourComponent;

由于您正在使用 ts，您将遇到声明问题，因此您必须声明文件的类型，并且要做到这一点，您将必须这样做

1. 在项目文件夹中创建一个 globle.d.ts 文件
2. 像这样声明类型

    /* globle.d.ts */
    declare module "*.jpg" {
    const content: string;
    export default content;
    }

3. 你必须在 tsconfig.json 中提及这个文件

   /* tsconfig.json */
   "include": ["src" , "globle.d.ts"],