CODEWITHSUNDEEP
javascripthtmlcssvideo.js
Jirkua Martinec
Jirkua Martinec

Reputation: 109

VIDEOjs Draggable progressbar

I have the newest videojs (version: 7.6.6).

Is it possible to make the progressbar draggable ?

Current state: When I move my mouse on the progressbar the first thing is that the player wait until few frames are downloaded and then move.

Want: I can move my mouse (with clicked state = mouseDown) over progressbar I want the time to update instead of waiting to download frame and then updating the time.

My current code: (videojs 7.6.6 and plugins included) - I'm using HLS

HTML

<video id="video" class="video-js" width="640" height="360" controls preload="auto">
        <source src="list.m3u8" type="application/x-mpegURL">
</video>

JS

var player = videojs('video', {
    fluid: false,
    inactivityTimeout: 2000,
    controlBar: {
        'pictureInPictureToggle': true,
        volumePanel: {
            inline: true
        }
    },
    html5: {
        hls: {
            overrideNative: true
        },
        nativeAudioTracks: false,
        nativeTextTracks: false,
    },
    plugins: {
        httpSourceSelector:
        {
            default: 'auto'
        }
    }
});
player.httpSourceSelector();
player.mobileUi({
    fullscreen: {
        enterOnRotate: true,
        lockOnRotate: true
    },
    touchControls: {
        seekSeconds: 10,
        tapTimeout: 300,
        disableOnEnd: false
    }
});

// My attempt to draggable scrollbar
var down = false;
player.controlBar.progressControl.on('mousedown', function() { down = true; });
player.controlBar.progressControl.on('mouseup', function() { down = false;  });
player.controlBar.progressControl.on('mousemove', function(e) {
    if(down) {
        console.log("move");
        // console.log(player.seekBar.update()); ??? or something else
    }
});

If you have some tips or advices I would be really glad.

PS: sorry for my english

Upvotes: 0

Views: 2957

Answers (1)

Jirkua Martinec
Jirkua Martinec

Reputation: 109

I create exactly what I asked for if anyone is interested :)

variable videojs is included in videojs.js file. (used version 7.6.6)

let player = videojs('ID_OF_YOUR_VIDEO');
const SeekBar = videojs.getComponent('SeekBar');

SeekBar.prototype.getPercent = function getPercent() {
    const time = this.player_.currentTime()
    const percent = time / this.player_.duration()
    return percent >= 1 ? 1 : percent
}

SeekBar.prototype.handleMouseMove = function handleMouseMove(event) {
    let newTime = this.calculateDistance(event) * this.player_.duration()
    if (newTime === this.player_.duration()) {
        newTime = newTime - 0.1
    }
    this.player_.currentTime(newTime);
    this.update();
    let currentTime = player.currentTime();
    let minutes = Math.floor(currentTime / 60);   
    let seconds = Math.floor(currentTime - minutes * 60)
    let x = minutes < 10 ? "0" + minutes : minutes;
    let y = seconds < 10 ? "0" + seconds : seconds;
    let format = x + ":" + y;
    player.controlBar.currentTimeDisplay.el_.innerHTML = format;
}

Upvotes: 5

Related Questions