# ✋快速上手

# ⭐️ Introduction

NiPlayer是一款由NovaNi开源的H5流媒体播放器，使用TypeScript+Less原生编写，实现组件和样式的响应式设计，完全脱离vue,react等框架，无任何第三方平台限制，可以根据自己的需要进行自由扩展；

# ❓ Why Choose It?

# ✅ 已完成

☑️ TypeScript编写，具有完善的类型系统和代码编写提示；
☑️ 响应式设计，内部时刻监听播放器尺寸的变化从而调整布局和样式；
☑️ 多端兼容，通过检测当前执行环境,对于移动端和PC端具有不同的布局和事件；例如PC端的点击事件为click，而移动端是；singleTap,因此NiPlayer可根据环境的不同初始化不同的事件系统
☑️ 高度定制化，你可以自定义自己的组件和插件，NiPlayer会为你的二次开发提供丰富的接口；
☑️ 高度完善的组件设计，提供不少于七种内置组件供用户使用，可以根据用户的喜好自由的卸载或者安装，详细请查阅内置组件章节；
☑️ 提供相应的弹幕组件；
☑️ 提供弹幕的api接口，方便在项目中使用，发送请求实时获取后端发送过来的弹幕数据并且展示。
☑️ 完善的字幕插件，支持外挂字幕，内嵌字幕，支持多语言字幕和不同字幕的显示和隐藏。
☑️ 可以适配多种流媒体协议，例如HLS,MPEG-DASH,FLV,只要安装相关的库即可，例如hls.js,flv.js,dash.js等。同时支持普通mp4文件的流式播放，可自主选择开启或关闭。

# ❌ 开发中

➕ 弹幕的控制组件完善； ➕ 内置弹框组件的编写； ➕ 移动端事件布局进一步完善；

# 安装

npm i -S niplayer

# 使用

import Player from "niplayer"
let player = new Player({
    url: "https://novaex.cc/OnePiece.mp4",// 视频资源的地址
    streamPlay: true, //是否开启流媒体播放
    container: document.getElementById("video") //组件的容器
})

TIP

之后NiPlayer会自动托管你传入的DOM元素，注意：DOM元素的样式由用户自己控制，播放器只会控制内置的样式。

除了在构造函数中传入url参数，还可以通过调用attachSource方法实现手动挂载资源.

let player = new Player({
    container: document.getElementById("video") //组件的容器
})

player.attachSource("https://novaex.cc/OnePiece.mp4")

还可以不使用内置的video元素，而是让播放器去使用你提供的video

let video = document.createElement("video")
let player = new Player({
    video,
    url: "https://novaex.cc/OnePiece.mp4"
})

← 安装配置项 →