Skip to main content

React

npm version gzip size Codacy Badge Test

如果你想在 React 项目中使用 NPlayer,可以使用 React 组件。

Installation#

npm i -S nplayer @nplayer/react

You need to install nplayer and @nplayer/react.

Or use via CDN.

<script src="https://unpkg.com/nplayer@latest/dist/index.min.js"></script>
<script src="https:/unpkg.com/@nplayer/react/dist/index.min.js"></script>

Quickstart#

import { useEffect, useRef } from "react";
import NPlayer from "@nplayer/react";
export default function App() {
const player = useRef();
useEffect(() => {
console.log(player.current);
}, []);
return (
<div>
<NPlayer
ref={player}
className=" "
style={{ }}
options={{ src: "https://v-cdn.zjol.com.cn/280443.mp4" }}
/>
</div>
);
}

NPlayer 组件接收一个 options prop。它是 NPlayer 构造函数参数,详情请查看 配置

NPlayer 内部把播放器包裹在一个 widthheight 都是 100% 的 div 中,你可以通过 classNamestyle prop,设置它的 css 类名和样式。

在线预览#

React DEMO: https://codesandbox.io/s/nplayer-react-demo-p558g