plyr-react

<h1 align="center">Plyr React</h1> <p align="center"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/6e1a3da1-f233-4170-8669-05bccf326214.png" title="plyr-react" alt="plyr-react logo" width="450"></p> <p align="center"> 一个响应式媒体播放器，简单、易用、可定制，适用于视频、音频、YouTube和Vimeo。 <br> <img src="https://img.shields.io/badge/Tree%20Shakeable-d4e157" alt="tree-shakeable" /> <img src="https://img.shields.io/badge/Side%20Effect%20Free-ffeb3b" alt="side-effect free" /> </p> <p align="center"> <a href="https://github.com/chintan9/plyr-react/blob/master/LICENSE"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/51ca904b-3399-4ef6-bd9f-5840671f32b5.svg?style=flat&colorA=000000&colorB=000000" alt="License"> </a> <a href="https://www.npmjs.com/package/plyr-react"> <img src="https://img.shields.io/npm/v/plyr-react?style=flat&colorA=000000&colorB=000000" alt="Version"> </a> <a href="https://www.npmjs.com/package/plyr-react"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/31c39400-45e1-4d91-8b3f-c8daa9fa4ca1.svg?style=flat&colorA=000000&colorB=000000" alt="Downloads"> </a> </p>

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

请确保在依赖项中选择了正确的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} />
}

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

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

</details>

即用型`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 示例: <a href="https://stackblitz.com/edit/react-fpmwns?file=src/App.js" title="stackblitz示例 (js)"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/c73ca169-204d-47fb-8821-d1285cb5cbb2.svg" alt="stackblitz示例 (js)" width="185"> </a>

TypeScript 示例: <a href="https://codesandbox.io/s/plyr-react-new-api-forked-cg08k?file=/src/App.tsx" title="codesandbox示例 (ts)"> <img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="codesandbox示例 (ts)" width="185"> </a>

基本HLS 集成 <a href="https://codesandbox.io/s/hidden-frost-mpdjj?file=/src/HLS.tsx" title="codesandbox示例 (ts)"> Codesandbox </a>

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

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

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

plyr-react的每日构建版本:

贡献

我们欢迎所有新的贡献，请随时阅读贡献指南和行为准则部分，创建新的issue讨论问题，并通过PR改进/修复/增强源代码。这里有一个随时可用的Gitpod，你可以从这里进入 <a href="https://gitpod.io/#https://github.com/chintan9/plyr-react" title="Gitpod plyr-react"><img src="https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod" alt="Gitpod Ready-to-Code"><a/>