NiPlayer

# 配置项

NiPlayer 播放器提供的配置项总览:

# url

type: string
desc: 视频资源地址，也可以通过调用player.attachSource(url)方法传入资源

# container

type: HTMLElement
desc: 播放器的容器，也可以之后调用dom.appendChild(this.player.el)手动添加

# video

type: HTMLVideoElement(可选)
desc: 默认播放器是使用自己内部创建的 video，如果用户不满意，可以自己传入 video 让播放器来托管

# post

type: string(可选)
desc: video 海报帧的 URL，用于在用户播放或者跳帧之前展示。

# streamPlay

type: boolean
desc: 是否开启对mp4视频的流式播放.
注意：只有你传入的资源格式为mp4时开启该选项才有效果，对于m3u8,mpd,flv等文件请使用对于的流媒体库来协助处理；详情见流媒体接入章节
默认为false,即将对mp4资源的请求扔给video自行去控制。设置为true时，播放器内部会开启video的mediasource进行流式播放和发送range类型的http请求，控制更加精细化。 如果你想要获得更好的请求控制，建议开启。

# subtitles

type: {source:string, tip: string, lang: string, style?: {[props:string]: any}}
desc: 字幕配置项
使用示例

new Player({
  url: "https://novaex.cc/fireworks.mp4",
  container: this.$refs.video,
  subtitles: [
    {
      source: "https://novaex.cc/subtitle.vtt", //字幕文件的地址
      tip: "Bilingual", // 字母设置栏对应要显示的内容
      lang: "en", // 字幕的语言类型
      style: { //自定义字幕的样式
        color: "red",
        backgroundColor: "yellow"
      }
    },
    {
      source: "https://novaex.cc/subtitle.zn.vtt",
      tip: "Chinese",
      lang: "zh",
      style: {
        fontSize: "20px"
        color: "green"
      }
    },
    {
      source: "https://novaex.cc/subtitle.jp.vtt",
      tip: "Japanese",
      lang: "jp",
    },
  ],
});
  1. source 为字幕地址
  2. tip 为开启字幕功能后对于设置栏中的 item 的内容，通常为该字幕的语言类型名称
  3. 字幕的具体语言类型 lang: "en" | "zh" | "jp"
    开启字幕功能后可支持字幕的显示隐藏，和不同类型字幕的切换显示

# danmaku

type: {open: boolean, api:string, type: "http" | "websocket"}
desc: 弹幕功能的相关配置,其中 api 为后台提供弹幕的接口,type 为请求接口的方式；分为：

  1. http短轮询
  2. websocket服务端推送
    具体信息和使用方法查看弹幕章节
    使用示例：
let player = new Player.default({
  url: "https://novaex.cc/fireworks.mp4",
  container: document.getElementById("video"),
  danmaku: {
    //弹幕
    open: true,
    api: "http://localhost/danmaku",
    type: "http",
  },
});

# plugins

type: Plugin[]
desc: 插件列表，在播放器实例化过程中会依次执行该数组中插件的install方法 使用示例

// 编写插件
let plugin = {
    // player为播放器的示例对象
    install(player) {
        player.xxxxx //执行player上的方法
    }
}

new Player({
    plugins:[plugin] //注册插件
})

# Controllers

type: Array<ComponentConstructor>
desc: 组件注册配置项,详情见组件章节

new Player({
    leftBottomBarControllers:[LeftBottom], //里面传入的变量需要为组件构造函数
    rightBottomBarControllers: [RightBottom],
    leftTopBarControllers: [LeftTop],
    rightTopBarController: [RightTop],
    leftMediumBarController: [LeftMedium],
    mediumMediumBarController: [MediumMedium],
    rightMediumBarController: [RightMedium]
})

← api →