React

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

安装

npm i -S nplayer @nplayer/react

你需要安装 nplayer 和 @nplayer/react。

或者通过 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>

快速上手

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 内部把播放器包裹在一个 width 和 height 都是 100% 的 div 中，你可以通过 className 和 style prop，设置它的 css 类名和样式。

在线预览

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