利用html5自定义实现播放器代码分享(2)-木庄网络博客

拖拽代码思路

//核心代码示例
var dragDis = 0
var processWidth = xxx //拖拽条总长
$('body').mousedown(function(e) {
    startX = e.clientX
    dragDis = startX - leftInit //leftInit为拖拽条起始点巨屏幕左侧的距离
    dragTarget.css({ //拖拽按钮
        left: dragDis
    })
    dragProcess.css({ //进度条(蓝色进度条)
        width: dragDis
    }) // 令进度条和拖拽按钮渲染在同一位置
    videoSource.pause()
}).mousemove(function(e) {
    moveX = e.clientX
    disX = moveX - startX
    var left = dragDis + disX
    if(left > processWidth) {
        left = processWidth
    } else if(left < 0) {
        left = 0
    }
    dragTarget.css({
        left: left
    })
    dragProcess.css({
        width: left
    })
}).mouseup(function(e) {
    videoSource.play()
    videoSource.currentTime = $('蓝色拖拽条').width() / processWidth * duration //拖拽后计算视频的正确播放位置
})

同理音量的控制与其上行为基本一致，故在源码中作者将音量与进度部分通过不同元素进行判断是进行进度还是音量的拖拽控制。

通过查询视频流状态控制播放前的加载动画

function ifState() {
    var state = videoSource.readyState
    if(state === 4) { //状态为4即可播放
        videoPlayer()
    } else {
        $('.play-sym-wrapper').remove()
        $('body').append('<p class="play-sym-wrapper"><img class="play-sym" src="./images/loading.gif"></p>')
        //添加loading动画
        setTimeout(ifState, 10)
    }
}
setTimeout(ifState, 10)