react项目如何导入视频

使用HTML5 video标签

在React项目中，可以直接使用HTML5的<video>标签嵌入视频。通过src属性指定视频路径，支持本地或远程URL。示例代码：

import React from 'react';

function VideoPlayer() {
  return (
    <video width="640" height="360" controls>
      <source src="/path/to/video.mp4" type="video/mp4" />
      您的浏览器不支持视频播放。
    </video>
  );
}

• controls属性显示播放控件（如播放/暂停按钮）。
• 支持多种视频格式（如MP4、WebM），可通过多个<source>标签提供备选方案。

动态导入视频文件

若视频文件位于src目录下，可通过import动态引入资源，避免路径错误：

import React from 'react';
import videoSource from './assets/video.mp4';

function VideoPlayer() {
  return (
    <video controls>
      <source src={videoSource} type="video/mp4" />
    </video>
  );
}

• Webpack会处理资源路径，适用于构建工具配置的项目。

使用第三方库（如react-player）

对于高级功能（如HLS、直播流），可使用react-player等库：

1. 安装库：

   npm install react-player

2. 示例代码：

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

function App() { return ( <ReactPlayer url="https://example.com/video.mp4" controls width="100%" height="auto" /> ); }

- 支持YouTube、Vimeo等平台链接。  
- 提供缓冲、进度条等增强功能。  

### 处理跨域和CDN资源  
若视频托管在CDN或外部服务器，需确保CORS策略允许加载。对于跨域问题：  
- 在服务器端配置`Access-Control-Allow-Origin`头部。  
- 使用`<video>`标签时，可添加`crossOrigin="anonymous"`属性：  
```jsx
<video controls crossOrigin="anonymous">
  <source src="https://cdn.example.com/video.mp4" />
</video>

响应式视频布局

通过CSS确保视频适应不同屏幕尺寸：

.video-container {
  max-width: 100%;
  aspect-ratio: 16/9;
}

在组件中应用：

<div className="video-container">
  <video controls style={{ width: '100%', height: 'auto' }} />
</div>

视频格式兼容性建议

• 优先提供MP4（H.264编码）作为默认格式，兼容大多数浏览器。
• 可额外提供WebM格式以优化性能：

  <video controls>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
  </video>