当前位置：首页 > React

react如何嵌入一个视频

2026-01-26 01:14:49React

使用HTML5 `<video>` 标签嵌入视频

在React中可以直接使用HTML5的<video>标签嵌入视频。通过src属性指定视频文件路径或URL，并添加controls属性以显示播放控件。

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

使用第三方库（如React Player）

对于更复杂的视频播放需求（如支持YouTube、Vimeo等），可以使用react-player库。安装后通过配置URL实现嵌入。

npm install react-player

import ReactPlayer from 'react-player';

function App() {
  return (
    <ReactPlayer 
      url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" 
      controls
      width="100%"
    />
  );
}

动态加载视频源

通过状态管理动态切换视频源，适用于需要根据用户交互切换视频的场景。

function DynamicVideo({ videoUrl }) {
  return (
    <video controls width="600">
      <source src={videoUrl} type="video/mp4" />
    </video>
  );
}

自定义视频播放器

通过useRef和事件监听实现自定义控件（如播放/暂停按钮）。

function CustomVideoPlayer() {
  const videoRef = React.useRef(null);

  const handlePlay = () => videoRef.current.play();
  const handlePause = () => videoRef.current.pause();

  return (
    <div>
      <video ref={videoRef} width="600">
        <source src="video.mp4" type="video/mp4" />
      </video>
      <button onClick={handlePlay}>播放</button>
      <button onClick={handlePause}>暂停</button>
    </div>
  );
}

响应式视频布局

通过CSS确保视频在不同屏幕尺寸下自适应。

react如何嵌入一个视频

<div style={{ maxWidth: '100%', overflow: 'hidden' }}>
  <video controls style={{ width: '100%', height: 'auto' }}>
    <source src="video.mp4" type="video/mp4" />
  </video>
</div>