当前位置：首页 > React

react项目如何导入视频

2026-01-24 09:42:04React

在React项目中导入视频的方法

使用HTML5的<video>标签 在React组件中可以直接使用HTML5的<video>标签来嵌入视频文件。将视频文件放在项目的public文件夹或通过import引入。

import React from 'react';

function VideoPlayer() {
  return (
    <video width="320" height="240" controls>
      <source src="/videos/sample.mp4" type="video/mp4" />
      您的浏览器不支持HTML5视频标签。
    </video>
  );
}

export default VideoPlayer;

通过import引入视频文件 如果视频文件位于src目录下，可以通过import语句引入视频文件，并使用动态路径。

import React from 'react';
import sampleVideo from './assets/sample.mp4';

function VideoPlayer() {
  return (
    <video width="320" height="240" controls>
      <source src={sampleVideo} type="video/mp4" />
    </video>
  );
}

export default VideoPlayer;

使用第三方库 对于更复杂的视频播放需求，可以使用第三方库如react-player，它支持多种视频格式和流媒体服务（如YouTube、Vimeo等）。

安装react-player：

npm install react-player

使用示例：

import React from 'react';
import ReactPlayer from 'react-player';

function VideoPlayer() {
  return (
    <ReactPlayer
      url="/videos/sample.mp4"
      controls
      width="100%"
      height="auto"
    />
  );
}

export default VideoPlayer;

动态加载视频 如果需要根据条件动态加载视频，可以通过状态管理来实现。

import React, { useState } from 'react';

function VideoPlayer() {
  const [videoUrl, setVideoUrl] = useState('');

  const handleVideoChange = (event) => {
    setVideoUrl(URL.createObjectURL(event.target.files[0]));
  };

  return (
    <div>
      <input type="file" accept="video/*" onChange={handleVideoChange} />
      {videoUrl && (
        <video width="320" height="240" controls>
          <source src={videoUrl} type="video/mp4" />
        </video>
      )}
    </div>
  );
}

export default VideoPlayer;

注意事项

react项目如何导入视频