一款基于jquery的无限拖动视频播放器进度条
一般的视频文件只有一定的时间长度,传统的有起终点的进度条可以满足。但是对有实时视频流的录像,需要一款专门的可无限拖动的进度条来适配,该进度就适合这样的场景
//引入css
<link rel="stylesheet" href="jquery.playerDragBar.css">
//引入jquery:该插件依赖jquery
<script src="jquery.js"></script>
//引入插件
<script src="jquery.playerDragBar.js"></script>
//定义个容器
<div class="player-bar"></div>
//初始化
var $playerBar=$('.player-bar')
$playerBar.playerDragBar({
timeSlot: 5,
dragstart: function () { //拖拽开始事件
console.log('开始拖拽')
}
})
var dragBarInstance = $playerBar.data('playerDragBar');
- timeSlot //每段时间间隔,单位:分钟
- currentTime //当前时间,单位:timeStamp
- startTime //视频开始时间,单位:timeStamp
- endTime //时间结束时间,单位:timeStamp
- slotNumber //显示的时间段数
- dragstart //拖拽开始事件
- dragend //拖拽结束事件
- updateCenterTime: //刷新当前中心时间
- updateTimeSlot: //更新每段的时间间隔
- resize: //刷新容器,通常用在容器尺寸发生变化时调用一次
- noConflict: //插件命名空间冲突时调用
拿到容器jquery对象调用方法:
$('.player-bar').playerDragBar('updateCenterTime', new Date().getTime())
通过playerDragBar实例对象调用方法:
dragBarInstance.updateCenterTime(new Date().getTime())
- dragstart
- dragend
在配置中设置回调:
$playerBar.playerDragBar({
dragend: function (e, time) {
console.log('拖拽结束')
}
})
通过容器jquery对象绑定事件回调:
$('.player-bar').on('dragend', function (e, time) {
console.log('拖拽结束', e, time)
})
$('.player-bar').playerDragBar.noConflict('myPlayerDragBar')