react-player自定义样式

`react-player` 是一个用于嵌入多种视频和音频流媒体平台的 React 组件库，包括 YouTube、Vimeo、SoundCloud 等。如果你想自定义 `react-player` 的样式，可以通过 CSS 来实现。以下是一些基本的自定义样式方法：

1. **全局样式**: 你可以为所有 `react-player` 组件定义全局样式，或者针对特定类型的媒体（如 YouTube、Vimeo 等）定义特定的样式。

/* 全局样式 */
div react-player {
  width: 640px; /* 设置视频播放器的宽度 */
  height: 360px; /* 设置视频播放器的高度 */
}

/* 特定类型媒体样式 */
div react-player[youtube] {
  /* 对 YouTube 类型的播放器应用特定样式 */
}

div react-player[vimeo] {
  /* 对 Vimeo 类型的播放器应用特定样式 */
}

2. **内联样式**: 你也可以直接在 `react-player` 组件上应用内联样式。

<ReactPlayer
  url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
  style={{ width: '640px', height: '360px' }}
/>

3. **动态样式**: 根据组件的属性或状态动态改变样式。

<ReactPlayer
  url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
  style={{ width: isPlaying ? '100%' : '640px', height: 'auto' }}
  playing={isPlaying}
/>

在上面的例子中，`isPlaying` 是一个状态变量，根据视频是否正在播放来动态调整播放器的宽度。

4. **使用 CSS Modules 或 styled-components**: 如果你的项目使用 CSS Modules 或 styled-components，可以利用这些工具创建更加封装和可复用的样式。

// 使用 CSS Modules
import styles from './Player.module.css';
<ReactPlayer
  url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
  className={styles.player}
/>

// 使用 styled-components
import styled from 'styled-components';
const StyledPlayer = styled(ReactPlayer)`
  width: 100%;
  height: 100vh;
`;
<StyledPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

自定义 `react-player` 样式可以让你更好地将播放器融入到你的网页设计中，提供一致的用户体验。