d-video.js 视频播放器

关于d-video.js

d-video.js是之前的公司中业务需求所拓展的一个通用的pc端插件,兼容ie9及目前主流浏览器,基于video元素来封装的视频的一体化操作 该插件包涵以下功能

  • 语速调整
  • 清晰度调整
  • 音量调整,菜单的显示与隐藏
  • 全屏设置,动态调整视频大小
  • 播放下一个视频的动态显示

代码引入

es6环境下可以基于npm 安装, import 导入的方式 安装:

1
  npm install d-video

导入:

1
  import Dvideo from 'd-video'

es5的代码可以使用script标签直接引用

1
  <script src="./d-video.js"></script>

使用

导入完之后,就可以开始使用了

初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  var video = new Dvideo ({
    ele: '#testVideo',
    // 名字
    title: 'Pneumatic Tokyo - EnV',
    nextVideoExtend: function () {
      // 点击下一页的回调函数, 此时通常会执行获取下一段视频的信息,然后执行视频切换
      video.setVideoInfo(title, url, currentT)
    },
    // 是否显示下一页按钮,配合nextVideoExtend
    showNext: true,
    width: '580px',
    height: '292px',
    src: 'http://www.daiwei.org/index/video/EnV%20-%20PneumaticTokyo.mp4',
    // 是否自动播放
    autoplay: true,
    setVideoDefinition: function (type, e, current) {
      if (type === '0') {
        alert('你点击了标清')
        // video.setVideoInfo('這是標清','这里填写视频的标清地址',current)
    }
    if (type === '1') {
        alert('你点击了标清')
        // video.setVideoInfo('這是標清','这里填写视频的高清地址',current)
    }
    if (type === '2') {
        alert('你点击了标清')
        // video.setVideoInfo('這是標清','这里填写视频的超清地址',current)
    }
    video.showLoading(false)
  },
})

属性

ele
1
dom 元素, 元素id需要带 # , 比如 #video  或者 .video
src
1
视频地址 <string>
isShowPoster
1
是否显示封面,默认为true   bool
title
1
视频的名称   string
width
1
视频显示宽度   string 默认 '300px'
height
1
视频显示高度   string 默认 '160px'
showNext
1
是否显示下一集按钮   bool   默认true
autoplay
1
是否自动播放   bool   默认  true
ctrSpeedDuration
1
控制条 关闭的时间  number (ms)
loop
1
视频是否循环播放   bool  默认false
showVolume
1
是否显示音量设置  bool  默认true
volume
1
音量大小  number  0.8
showVolumeUnFull
1
在非全屏幕下是否显示音量调整条   bool  默认false
showPlayBackRate
1
是否显示设置语速菜单列表   bool   默认true
showPlayBackRateUnFull
1
是否在未全屏的情况下 显示语速   bool  默认true
playbackRate 语速的设置 object
1
2
  activeIndex: 索引  number
  rateList: 语速  array   [0.8, 1, 1.2, 2]
showVideoDefinition
1
是否显示清晰度  bool  默认true
showVideoDefinitionUnFull
1
非全屏的状态下是否显示   bool   默认true
videoDefinition: 清晰度的设置 object
1
2
3
4
  activeIndex: 索引  number
  definitionList: 清晰度选项  object
    definitionList.type: 类型
    definitionList.name: 名称
nextVideoExtend
1
可让用户自定义扩展   点击下一个视频的操作  function
setVideoDefinition
1
设置清晰度的回调  参数  (type, event, currentT)  function
onTimeupdate
1
进度更新事件  参数(currentT)  function
onPlaying
1
视频播放事件  参数(currentT)  function
onPause
1
视频暂停事件  function
onEnded
1
视频播放结束事件   function
onLoadedMetaData
1
元数据加载成功事件    function

方法

更新视频宽度高度
1
2
3
video.updateVideoSize()
@param { number }  width   宽度
@param { number }  height   高度
显示上下菜单
1
2
video.showTopBottomCtrl()
@param { bool }  disappearance   是否自动消失
关闭上下菜单
1
2
video.hideTopBottomCtrl()
@param { bool }  immediately   是否立刻关闭
更新音量
1
2
video.updateVolume(0.5)
@param { number }  vol   音量大小  0 - 1 之间
快进
1
2
video.videoForward(seconds)
@param { number } seconds  快进时长
快退
1
2
video.videoRewind(seconds)
@param { number } seconds  快退时长
跳转到具体位置
1
2
video.videoSeek(seconds)
@param { number } seconds  跳转的位置
切换视频地址
1
2
3
4
video.setVideoInfo()
@param { sting } title  视频的名称
@param { string } url  视频的地址
@param { number } currentT  视频开始播放的时间,默认为0
上一篇 : DOM & BOM下一篇 : 伪数组