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版本。

安装

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

使用方法

即用型<Plyr />组件

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

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

[object Object],[object Object]

</details>

即用型usePlyr钩子

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

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

使用refs访问plyr实例

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

API:

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

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

示例

你可以复制这些示例

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集成指南。

[object Object]

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

plyr-react的每日构建版本:

<a href="https://github.com/chintan9/plyr-react/tree/dev/example" title="每日构建版本抢先体验"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/e85cf5c3-dd55-47d6-be07-8bb841f05a06.png"> </a>

贡献

我们欢迎所有新的贡献，请随时阅读贡献指南 和行为准则部分，创建新的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/>

支持

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

鸣谢

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