Dvideo.js 是公司业务需求所拓展的一个通用的 js 插件, 包涵全屏设置, 音量调整, 清晰度调整, 语速调整等多个 h5video 的功能, 基于原生 js 开发, 可拓展性高
代码初始化:
可以通过 npm 直接下载
Demo 地址: http://www.daiwei.org/components/Dvideo/
github 地址: https://github.com/IFmiss/Dvideo.js
npm 地址: https://www.npmjs.com/package/d-video
npm install d-video --save-dev
在 js 中引入
- import Dvideo from 'd-video'
- var video = new Dvideo({... : ...})
- // html
- <div id="video"></div>
- // Script 初始化
- var video = new Dvideo ({
- ele: '#testVideo',
- title: 'Pneumatic Tokyo - EnV',
- nextVideoExtend: function () {
- alert('您点击了下一页')
- },
- showNext: true,
- width: '580px',
- height: '292px',
- src: 'http://www.daiwei.org/index/video/EnV - PneumaticTokyo.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)
- },
- })
- // ========================
- // 对象里面编写对应的参数
- // video 元素
- ele: '#video',
- // 地址
- src: 'http://www.daiwei.org/index/video/EnV - PneumaticTokyo.mp4',
- // ----- 封面
- // 是否显示封面
- isShowPoster: true,
- // 封面的地址
- poster: 'http://www.daiwei.org/vue/image/17-07-07/IMG_0330.jpg',
- // video 的名称
- title: 'Hi EveryOne...',
- // video 的宽度
- width: '420px',
- // video 的高度
- height: '250px',
- // 是否显示下一个 按钮
- showNext: true,
- // 是否自动播放
- autoplay: true,
- // 控制条 关闭的时间
- ctrSpeedDuration: 3000,
- // 视频是否循环
- loop: false,
- // ------ 音量
- // 是否显示音量
- showVolume: true,
- // 音量大小
- volume: 0.8,
- // 在非全屏幕下是否显示音量调整条
- showVolumeUnFull: false,
- // ------ 语速
- // 是否显示设置语速菜单列表
- showPlayBackRate: true,
- // 是否在未全屏的情况下 显示语速
- showPlayBackRateUnFull: true,
- // 语速的设置
- playbackRate: {
- // 索引
- activeIndex: 1,
- // 选项
- rateList: [0.8,1,1.5,2]
- },
- // ------ 清晰度
- // 是否显示清晰度
- showVideoDefinition: true,
- // 是否在未全屏幕的情况下 显示清晰度
- showVideoDefinitionUnFull: true,
- // 清晰度信息
- videoDefinition: {
- // 索引
- activeIndex: 1,
- // 选项
- definitionList: [
- {
- // 类型 字符串标识
- type: '0',
- // 类型 展示效果标识
- name: '标清'
- },
- {
- type: '1',
- name: '高清'
- },
- {
- type: '2',
- name: '超清'
- }
- ]
- },
- // ================ 暴露的方法
- // 可让用户自定义扩展 点击下一个视频的操作
- nextVideoExtend: () => {},
- // 设置清晰度的操作
- setVideoDefinition: (type, event, currentT) => {},
- // 暴露的视频 time 更新事件
- onTimeupdate: (currentT) => {},
- // 暴露的视频 Playing 事件
- onPlaying: (currentT) => {},
- // 暴露的视频暂停事件
- onPause: () => {},
- // 暴露的视频结束事件 (loop 不会执行 end 事件)
- onEnded: () => {},
- // 暴露视频初始化事件 元数据加载成功事件
- onLoadedMetaData: () => {}
实例化的 video 也有很多可用的字段比如
isFull: 是否是全屏状态
isLoadMate: 是否已经加载了元数据
isPlaying: 是否在播放状态
durationT: 当前视频的时长
currentT: 当前视频的播放时间点
currentP: 当前视频的时长占视频总长度的百分比
volume: 当前的音量大小
browserV: 当前浏览器的版本
来源: http://www.qdfuns.com/article/20928/baa0166ea35873d5c5c44cf325eff776.html