@x-edu/video-player

v0.0.1

Published

4 months ago

国家中小学项目基于video.js的视频播放器插件

Downloads

0High
0Medium
0Low

视频播放器组件

视频播放器

何时使用

播放音/视频的时候

浏览器支持

IE 9+

安装

npm install videoplayer --save

运行

# 默认开启服务器，地址为 ：http://local:8000/

# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新
npm run start

# 构建生产环境静态文件，用于发布文档
npm run site

代码演示

hls自定义key解密流程

除了标准的解密流程外，还支持自定义解密流程。

import videoplayer from '@sdp.nd/videoplayer'
import "@sdp.nd/videoplayer/lib/style/"
import getNdrHlsKey from '@sdp.nd/ndr-hls-decrypt';

const hlsOptions = {
  hls: {
    keyCallback: (callback, url) => {
      getNdrHlsKey(url).then(key => {
        callback(key);
      });
    },
  },
};

class App extends React.Component {
  componentDidMount () {
    const options = {
      controls: true,
      plugins: {
        videoJsResolutionSwitcher: {
          default: 'high',
          dynamicLabel: true
        }
      },
      resources: [
        {
          src:
            'http://r1-ndr.ykt.cbern.com.cn/esp_courseareobject/exercise_video/c6d07723-d7ba-44ce-95b5-c5408cf7b203/transcode/52ff3688-808c-48e7-9b66-b59879c4da30-1920x1080-818f9782acc5d5f2ffd16f9f1048409a.m3u8',
            type: 'application/x-mpegURL',
          label: '标清'
          },
        {
          src: 'http://r1-ndr.ykt.cbern.com.cn/esp_courseareobject/exercise_video/c6d07723-d7ba-44ce-95b5-c5408cf7b203/transcode/52ff3688-808c-48e7-9b66-b59879c4da30-1920x1080-818f9782acc5d5f2ffd16f9f1048409a.m3u8',
          type: 'application/x-mpegURL',
          label: '高清'
        }
        ],
      techOrder: ['html5', 'flash'],
      html5: hlsOptions, flash: hlsOptions
    }
    const player = videoplayer(this.videoNode, options)
  }

  render() {
    return (
      <div data-vjs-player>
        <video ref={ node => this.videoNode = node } className="video-js" />
      </div>
    )
  }
}

ReactDOM.render(<App />, mountNode);

走马灯(视频水印设置)

设置视频水印。

.main-container {
  overflow: visible;
}

import videoplayer from '@sdp.nd/videoplayer'
import "@sdp.nd/videoplayer/lib/style/"

class App extends React.Component {
  componentDidMount () {
    const options = {
      watermark: {
        userInfo: {
          real_name: 'janya',
          mobile: '11122222222',
          user_id: '1230984712039487',
        },
        domainScope: ['localhost']
      },
      fluid: true, // 自适应
      controls: true,
      playbackRates: [0.75, 1, 1.25, 1.5, 1.75, 2],
      inactivityTimeout: 2000, // 设置闲置2s后控制条隐藏
      sources: [{ // 视频源
        src: '//cdncs.101.com/v0.1/static/fish/media/ocean.mp4',
        type: 'video/mp4'
      }],
      tracks: [{ // 字幕源
        kind: 'captions',
        src: '//cdncs.101.com/v0.1/static/fish/media/test.vtt',
        srclang: 'en',
        label: 'english',
        default: 'default'
      }],
      rateChangeTip: {
        text: (player) => {
            return `正在切换到<span style="color: blue;">${player.playbackRate()}</span>倍速`
        }
      }
    }
    this.player = videoplayer(this.videoNode, options)
  }
  setDragTime = () => {
    if (this.player) {
      console.log(this.input.value)
      this.player.dragTime = parseInt(this.input.value) || 0
    } else {
      alert('播放器未初始化完成！')
    }
  }
  render () {
    return (
      <div>
        <div data-vjs-player>
          <video ref={ node => this.videoNode = node } className="video-js vjs-big-play-centered" />
        </div>
        <input ref={node => this.input = node} />
        <button onClick={this.setDragTime}>动态设置可拖拽时间</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, mountNode);

options

组件使用了videojs6.x，这里列出来一些常用参数，更多用法参考

| 参数 | 说明 | 类型 | 默认值 | 版本 | |----------- |--------------------------------------------------- | ---------- |-------| --- | | logo | 控制栏右下角logo图标的url地址 | string | 无 | | | loadingLogo | 当用户进入播放时，首先会出现的loading logo界面，loading logo完成后会开始播放| object<loadingLogo> | 无 | | | spriteThumbnails | 预览图插件参数| object<spriteThumbnails> | 无 | | | markers | 在进度条上标记插件参数| object<markers> | 无 | | | resources | 切换清晰度源插件参数 | Array<resources> | 无 | | | inactivityTimeout | 闲置超时，单位为毫秒；值为0表示没有 | number | 3000 | | | controls | 是否显示控制条；当没有控制条的时候，需要使用autoplay属性或者通过player API来控制播放 | boolean | false | | | width | 设置视频播放器的宽度(以像素为单位);当使用如50%的时候，会被自动转换为50px | string|number | 640 | | | height | 设置视频播放器的高度(以像素为单位);当使用如50%的时候，会被自动转换为50px | string|number | 480 | | | fluid | 设置为true时将会自适应容器大小，设置className为vjs-fluid有相同效果 | boolean | false | | | playbackRates | 播放速度，由大于0的数字组成的数组, 当有值时，控制栏会出现一个播放速度控制按钮 | Array<Number> | 3000 | | | poster | 视频开始前的封面图片 | string | 无 | | | sources | 对应video标签下的一系列source标签的数组对象，对象内需要有src和type属性 | Array<{src: string, type: string}> | 无 | | | techOrder | 定义优先用那种方式播放视频，默认使用html5，组件里内置了flash播放；比如使用['html5', 'flash']表示优先使用html5，无法播放时使用flash;你也可以根据需要注册其他技术 | Array<String> | ['html5'] | | | rateChangeTip | 自定义切换倍速时的左下角提示 | string | (player) => string | 无 | 0.2.2 |

loadingLogo

| 参数 | 说明 | 类型 | 默认值 | 版本 | |----------- |-------------------------------------------------- | ---------- |-------| --- | | url | loading logo的url地址 | string | 无 | | | time | loading logo播放的时间 | number | 无 | |

spriteThumbnails

| 参数 | 说明 | 类型 | 默认值 | 版本 | |----------- |-------------------------------------------------- | ---------- |-------| --- | | interval | 每张预览图的时间间隔,单位为秒 | number | 1 | | | path | 预览图url路径数组 | Array | 无 | | | width | 每张预览图小图的宽度，单位为像素 | number | 无 | | | height | 每张预览图小图的高度，单位为像素 | number | 无 | |

markers

参考

| 参数 | 说明 | 类型 | 默认值 | 版本 | |----------- |-------------------------------------------------- | ---------- |-------| --- | | markerStyle | 为标记点添加自定义样式，如{ 'width': '2px', 'border-radius': '50%' } | object | { 'width': '7px', 'border-radius': '30%', 'background-color': 'red' } | | | markerTip | 自定义hover在标记点时的显示 | markerTip | - | | | breakOverlay | 到达每个标记时间点是的覆盖提示 | breakOverlay | - | | | onMarkerReached | 到达标记时间点后的回调,参数为到达的标记实例和标记索引 | function (marker, index) | - | | | onMarkerClick | 点击标记点后的回调，参数为点击的标记实例 | function (marker) | 无 | | | markers | 想要显示在进度条的标记点配置 | Array<object> | 无 | |

resources

参考

| 参数 | 说明 | 类型 | 默认值 | 版本 | |----------- |-------------------------------------------------- | ---------- |-------| --- | | src | 视频源地址 | string | - | | | type | 视频mime类型 | string | - | | | label | 当前源展示在菜单上的名字 | string | - | |

player方法

通过调用实例化后的player方法，可以控制播放，暂停，播放速率等；更多方法参考

| 方法 | 说明 | 类型 | |----------- |--------------------------------------------------- | ---------- | | controls() | 获取或设置是否显示控制条;当传入true时，控制条显示，传入false，控制条隐藏；不传入参数，返回当前控制条显示状态 |(boolean) => {boolean} | | createModal() | 创建一个简单的模态框; | (content: string | function | element | array | null, options:object) => ModalDialog | | currentSrc() | 返回当前源的一个完整合法的地址,如：http://mysite.com/video.mp4 | () => String | | currentTime() | 获取或设置当前播放时间（单位为秒）|(seconds: number | string) => number | | currentType() | 获取当前的源类型，如：video/mp4| () => string| | dispose() | 销毁播放器实例| -| | duration() | 获取视频的时间长度（单位为秒）；注意：获取时间长度之前，视频必须已经开始加载；在使用flash的时候，可能直到视频播放才能获取|() => number| | ended() | 获取当前是否播放处于结束的状态| () => boolean| | exitFullscreen() | 退出全屏| - | | isFullscreen() | 返回当前是否是全屏状态 | () => boolean | | loop() | 获取或者设置video 元素的loop属性 | (boolean) => boolean | | muted() | 获取或设置当前的静音属性 | (boolean) => boolean | | play() | 播放 | - | | played() | 获取已经播放过的TimeRange对象 | () => TimeRange | | pause() | 暂停 | - | | paused() | 获取前是否处于暂停状态 | () => boolean | | playbackRate() | 获取或设置播放速率;传入0.5表示0.5倍速，闯入1表示正常倍速；不传入参数，返回当前播放速率 | (rate) => number | | buffered() | 返回已下载的事件范围的数组对象，如果你仅仅想要获取已下载的百分比，使用bufferedPercent方法 | () => TimeRange | | bufferedPercent() | 获取已下载的百分比，值为0到1的小数 | () => number |

player事件

更多事件参考

| 方法 | 说明 | 类型 | |----------- |--------------------------------------------------- | ---------- | | abort | 当音频/视频加载失败时触发 | function(event) | | canplay | 当浏览器能够开始播放指定的音频/视频时 | function(event) | | canplaythrough | 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。 | function(event) | | dispose | 当播放器实例被销毁的时候触发 | function(event) | | durationchange |当指定音频/视频的时长数据发生变化时，发生 durationchange 事件。当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。 |function(event)| | ended | 在音频/视频(audio/video)播放完成后触发。 | function(event) | | fullscreenchange| 进入或者退出全屏的时候触发。 |function(event)| | loadstart |当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时。|function(event)| | pause |当音频/视频暂停的时候触发|function(event)| | play |当音频/视频播放的时候触发|function(event)| | playing |在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。|function(event)| | posterchange | 当封面变化的时候触发 |function(event)| | progress |当浏览器正在下载指定的音频/视频时，会发生 progress 事件。|function(event)| | ratechange | 当播放速率发生改变时候触发|function(event)| | seeked | 在用户已移动/跳跃到音频/视频中的新位置时触发。|function(event)| | seeking | 在用户开始移动/跳跃到新的音频/视频（audio/video）播放位置时触发。|function(event)| | stalled | 在浏览器尝试获取媒体数据，但数据不可用时触发。|function(event)| | timeupdate |在音频/视频（audio/video）的播放位置发生改变时触发。每15~250ms触发一次，取决于使用的播放技术和浏览器|function(event)| | useractive | 用户进入活动状态时触发|function(event)| | userinactive | 用户退出活动状态时触发 |function(event)| | volumechange |在音频/视频的音量发生改变时触发。|function(event)| | waiting | 在音频/视频由于要播放下一帧而需要缓冲时触发。|function(event)|

video.js的插件编写

组件内部使用了video.js, 因此可以使用video.js的开发插件方法，添加更多个性化的功能。插件的开发参考。组件内置了如下三个插件：