nan-player v0.3.21

Nan Player

本视频播放器使用了 react、redux、redux-saga 实现了支持原生 H5 Video 的所有格式，同时添加了对 HLS 和 FLV 的支持。为了减轻打包 js 文件，兼容了 preact 替换 react，打包后的 js 文件 gzip 后的大小为77KB左右（hls 和 flv 的代码是会根据视频类型动态加载的，视频类型根据文件后缀名判别）。

不使用 react 的项目一样可以使用 nan-player，不过打包后的代码包含了react相关代码，如果使用jsx语法，那么用法大部分基本一致。当然建议使用react更好，如果使用react、redux、redux-saga，除开这些依赖代码，nan-player的代码，包括图片样式，gzip后在20KB以内。

功能

• 原生 H5 支持的视频源播放
• HLS 视频播放
• FLV 视频播放
• 字幕
• 缩略图预览
• 播放速度
• 视频断片功能（这个是个额外功能）

兼容性

兼容 IE10 以上，Edge、谷歌、火狐、Opera、Safari 等主流浏览器。但是由于需要支持 HLS 和 FLV，HLS 只兼容了 IE11。FLV 也是只兼容了到 IE11 和 Sarari 10 版本以上。

不支持音频文件的 UI，目前本项目只处理了视频 UI。

目前只支持 PC 端，暂不支持移动端。

入门使用

安装

首先安装nan-player

npm i nan-player -S

或者 clone 本项目，运行下面的命令

npm install
npm run build
#npm run serve-umd-build 可以查看启动服务umd demo。
#npm run start 可以查看开发环境demo
#npm run build-demo可以构建项目demo
#npm run serve-demo-build 可以启动服务查看项目demo

构建后的 js 文件生成在dist目录下，直接使用 dist 目录下的 nanPlayer.js，然后调用全局变量 window.nanPlayer 使用即可。

使用

在 react 中的使用，react 版本要求是 v15.x 以上，还需要引入样式：

import 'nan-player/libs/assets/css/style.css';

import React from 'react';
import NanPlayer from 'nan-player';
class View extends React.Component {
  render() {
    return (
      <NanPlayer
        title="这里是标题"
        file="/test.mp4"
        //logo支持string，React Element和plainObject
        logo={{
          image: '/logo.png',
          link: 'https://github.com/dog-days/nan-player',
        }}
        videoCallback={palyer => {
          //player参数是实例化后的播放器，详情请看后续API
        }}
      />
    );
  }
}

如果使用的是打包后的 nanPlayer.js，使用如下：

<script src="/nanPlayer.js"></script>
...
<div id="test"></div>
<script>
  //nanPlayer是全局变量
  //返回的是promise对象。
  //打包后的nan-player，window.React可以直接使用。
  nanPlayer({
    //比react的props要多一个id
    //元素id
    id: 'test',
    title: "这里是标题",
    file: "/test.mp4",
    //logo支持string，React Element和plainObject
    logo: {
      image: '/logo.png',
      link: 'https://github.com/dog-days/nan-player',
    },
    //打包后的nan-player，window.React可以直接使用。
    children: React.createElement('div',{},"这里是标题"),
  }).then(player=>{
    //player参数是实例化后的播放器，详情请看后续API
  })
</script>
...

如果使用 flv 直播，需要设置 enableWorker，可以减少延时到 1 秒左右。 但是如果不是直播，不可以设置，否则会报错。

<NanPlayer
  flvConfig={{ enableWorker: true }}
  title="这里是标题"
  file="/test.mp4"
  //logo支持string，React Element和plainObject
  logo={{
    image: '/logo.png',
    link: 'https://github.com/dog-days/nan-player',
  }}
/>

API

播放器 props 参数

//react jsx用法
<Napplayer {...props} />
//umd用法 nanPlayer(props)

参数如下：

props.controls

controls 默认为 true。

controls=true时，上面 controls 参数默认值为 true 的都会显示，controls=false控制条隐藏。

controls={ timeSlider: false }时，timeSlider 隐藏，其他按钮按默认值展示。

controls 还可以自定义 controlbar 按钮，例如自定义下载按钮：

<NanPlayer
  file="https://media.w3.org/2010/05/sintel/trailer.mp4"
  controls={{
    dowload: (
      <a className="float-right" href={file} target="_blank" download={file}>
        <svg className="nan-icon" aria-hidden="true">
          <use xlinkHref="#icon-download" />
        </svg>
      </a>
    ),
  }}
/>

props.tracks

• 字幕

  <NanPlayer
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    tracks={[
      {
        kind: 'captions',
        file: '/caption.vtt',
      },
    ]}
  />

• 缩略图

  <NanPlayer
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    tracks={[
      {
        kind: 'thumbnail',
        file: '/thumbnail.vtt',
      },
    ]}
  />

props.fragment

视频断片功能，比较特殊的一个功能，这种情况比较少用。最适合用在m3u8，因为m3u8是文本，可以很简单的合并分段的视频。

<NanPlayer
  file="https://media.w3.org/2010/05/sintel/movie.m3u8"
  fragment='/fragment.json'
/>

fragment定义如下：

{
  "total": {
    "begin": "2017-10-03 00:00:00",
    "end": "2017-10-03 00:01:19"
  },
  "fragments": [
    {
      "begin": "2017-10-03 00:00:02",
      "end": "2017-10-03 00:00:12"
    },
    {
      "begin": "2017-10-03 00:00:32",
      "end": "2017-10-03 00:00:42"
    },
    {
      "begin": "2017-10-03 00:00:45",
      "end": "2017-10-03 00:00:52"
    }
  ]
}

props.logo

• string

  这种情况，点击 logo 无跳转。

  <NanPlayer
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    logo="/logo.png"
  />

• object

  这种情况，点击 logo 无跳转。

  <NanPlayer
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    logo={{
      image: '/logo.png',
      link: 'https://github.com/dog-days/nan-player',
    }}
  />

• React.element

  这种情况，点击 logo 无跳转。

  <NanPlayer
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    logo={
      <a href="https://github.com/dog-days/nan-player">
        <img src="/logo.png" />
      </a>
    }
  />

props.localization

默认值为：

//异步加载hls或flv代码，才会提示播放器加载中。
{
  loadingPlayerText: '播放器加载中...',
  unknownError: '发生了未知错误',
  fileCouldNotPlay: '视频加载出错',
  timeout: '视频加载超时',
  speed: '倍速',
  normalSpeed: '正常',
}

props.contextMenu

• boolean

  是否展示contextMenu，true是，展示默认的contextMenu。

  <NanPlayer
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    contextMenu={false}
  />

• array

  这种情况，适合用于展示多个，展示样式也是用默认的。

  <NanPlayer
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    contextMenu={[
      <a href="#demo">demo</a>,
      <a href="#demo2">demo2</a>,
    ]}
  />

• React.element

  可以进行自定义结构和样式。

  <NanPlayer
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    contextMenu={
      <ul>
        <li><a href="#demo">demo</a></li>,
        <li><a href="#demo2">demo2</a></li>,
      </ul>
    }
  />

播放器实例化对象

react 在 props.videoCallback 返回播放器实例

<NanPlayer
  file="/test.mp4"
  videoCallback={palyer => {
    //player参数是实例化后的播放器
  }}
/>

umd 打包后在 primse 对象中返回播放器实例。

nanPlayer({
  id: 'test',
  file: '/test.mp4',
}).then(player => {
  //player参数是实例化后的播放器
});

属性

这些属性值只读。

方法

• play()

  播放视频。

• pause()

  暂停视频播放。

• setVolume(volume)

  控制音量。

  参数	类型	说明	必填
  volume	number	音量大小，最大值为 100	是

• setMuted(flag)

  控制音量。

  参数	类型	说明	必填
  flag	boolean	静音控制	是

• replay()

  重新播放。

• setSeeking(percent)

  视频播放进度选取。

  参数	类型	说明	必填
  percent	number	视频播放位置，按百分比来算的，最大值为 1	是

• fullscreen(flag)

  全屏或者退出全屏操作。

  参数	类型	说明	必填
  flag	boolean	true 全屏，false 退出全屏	是

• controlbar(flag,delayTimeToHide,onControlbarEnter)

  控制条显示或者隐藏控制。

  参数	类型	说明	必填
  flag	boolean	true 显示，false 隐藏	是
  delayTimeToHide	number	延时隐藏时间，毫秒级（只对隐藏有效）	否
  alwaysShowControlbar	boolean	为 true 时其他操作无法隐藏 controlbar	否

• showErrorMessage(message)

  展示错误信息。

  参数	类型	说明	必填
  message	string	错误信息，为 null 时，错误信息不展示。	是

• playbackRate(rate)

  控制播放速度。

  payload	类型	说明	必填
  rate	number	playbackRate 值	是

• on(type, callback)

  事件监控，这里可以继承所有video DOM 事件（用 addEventlisener 绑定事件一样），同时也可以监听nan-player的自定义事件。

  /**
   * 监控事件
   * @param { string } type 事件类型
   * @param { function } callback 回调函数
   */
  on(type, callback) {}

• off(type)

  移除指定或者部分或者全部监控事件，包括多次绑定的事件，当 type=undefined 移除全部事件。

  /**
   * 移除指定或者部分或者全部监控事件，包括多次绑定的事件
   * @param { string || undefined || array } type 事件类型
   */
  off(type) {}

• trigger(name, ...params)

  触发自定义事件。

自定义事件列表

可以使用实例化后的播放器监控，例如：

player.on('loading', function(loading) {
  console.log(loading);
});

• focus

  鼠标是否聚焦在播放器，鼠标移动到播放器或者点击播放器都会聚焦，解除聚焦需要点击非播放器的其他地方。

• loading

  事件加载事件，中途因为的视频加载也会触发此事件。

• ready

  视频准备完成，可以播放（video dom dataloaded事件触发）。

• replay

  视频播放结束，点击重新播放按钮，会触发重新播放事件。

• volume

  音量变化事件。

• seek

  视频时间轴（time-line）拖动，点击触发。

• fullscreen

  全屏事件触发，包括退出全屏。

• controlbar

  视频控制台显示与隐藏事件。

• reload

  重载事件，这个事件一般都是视频加载触发，出现刷新按钮，点击后触发。

• error

  这个错误事件是 hls 或者 flv 视频解析报错时触发的。