Plyr React

plyr-react logo

一个响应式媒体播放器，简单、易用、可定制，适用于视频、音频、YouTube和Vimeo。

你可以在这里查看在线演示。

请确保在依赖项中选择了正确的plyr-react版本。

安装

# NPM
npm install plyr-react

# Yarn
yarn add plyr-react

使用方法

即用型`<Plyr />`组件

与plyr最简单的React集成方式是使用<Plyr />组件，它最适合静态视频。

import Plyr from "plyr-react"
import "plyr-react/plyr.css"

const plyrProps = {
  source: undefined, // https://github.com/sampotts/plyr#the-source-setter
  options: undefined, // https://github.com/sampotts/plyr#options
  // 内部video标签的直接属性 (mdn.io/video)
}

function MyPlyrVideo() {
  return <Plyr {...plyrProps} />
}

旧版本4 plyr-react

- 在版本5中，CSS样式的导入路径已更改，如果你使用的是版本4，请在上述代码中进行以下修改

- import "plyr-react/plyr.css"
+ import "plyr-react/dist/plyr.css"

即用型`usePlyr`钩子

如果你需要对所有可能的集成进行完全控制，usePlyr是你的选择。以下是使用usePlyr钩子制作的简单而精确的Plyr组件。如果你好奇它是如何工作的，可以查看这个讨论和这个提议。

const Plyr = React.forwardRef((props, ref) => {
  const { source, options = null, ...rest } = props
  const raptorRef = usePlyr(ref, {
    source,
    options,
  })
  return <video ref={raptorRef} className="plyr-react plyr" {...rest} />
})

使用refs访问plyr实例

// 函数式组件
const MyComponent = () => {
  const ref = useRef()

  useEffect(() => {
    console.log("内部plyr实例:", ref.current.plyr)
  })

  return <Plyr ref={ref} />
}

// 类组件
class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.player = createRef()
  }

  componentDidMount() {
    console.log("内部plyr实例", this.player.current.plyr)
  }

  render() {
    return <Plyr ref={(player) => (this.player.current = player)} />
  }
}

API:

目前导出的API包含了plyr的最新实例。换句话说，传递的ref将能够访问如下结构所示的播放器。

return <Plyr ref={ref} />

// ref可以通过 `ref.current.plyr` 访问最新的plyr实例
ref = { current: { plyr } }

// 因此你可以让播放器全屏 🎉
ref.current.plyr.fullscreen.enter()

示例

你可以复制这些示例

JavaScript 示例:

TypeScript 示例:

基本HLS 集成 Codesandbox

查看examples目录获取useHls集成指南。

<video
  ref={usePlyr(ref, {
    ...useHls(hlsSource, options),
    source,
  })}
  className="plyr-react plyr"
/>

演示: https://react-fpmwns.stackblitz.io

plyr-react的每日构建版本:

贡献

我们欢迎所有新的贡献，请随时阅读贡献指南和行为准则部分，创建新的issue讨论问题，并通过PR改进/修复/增强源代码。这里有一个随时可用的Gitpod，你可以从这里进入

支持

如果你喜欢这个项目并想支持我的工作，请给个星星⭐或fork。

鸣谢

@realamirhe 提供帮助集成到react-aptor。
@iwatakeshi 提供帮助转换为TypeScript。

plyr-react