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