Progress drag gesture not working on devices, emulate or touch based screens.

[ubalensi-yoobic]

Description

Hey, I have found an issue while trying to drag the knob of the video progress for mobile/ touch based screen. So whatever the video is paused or not, grabbing the knob to drag it will cause the video to restart from the begining all the time. However, on web or mouse based screen, this is working fine.
We are currently running the 7.18.1, i tried to upgrade to 7.19.0 and downgrade up to the 7.17.3 and we have got that issue in all those version.

To be able to reproduce, just open any video from emulate mode ( of chrome for example )

Results

Expected

When grabbing the knob of the progress on touch based screen, the video progress should update based on the current position of the knob while dragged over the progress.

Actual

When grabbing the knob of the progress on touch based screen, this cause the video to restart from the begining.

Error output

No console errors

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[mister-ben]

Can you provide an example of a video/page where this happens? It doesn't happen on any I've tried.

[ubalensi-yoobic]

did you test on mobile or on a touch based screen ? the issue occurs there, on web or mouse based screens this works fine

[gkatsev]

I'm unable to reproduce on mobile or via emulated-touch via chrome dev tools on https://videojs-preview.netlify.app/sandbox/index.html
Based on your description of what's happening, it sounds like your media server likely has missing capabilities like responding to range requests.

[ubalensi-yoobic]

After further investigations on our side, the issue seems to be only reproducible from a video uploaded from an IOS devices and opened from an IOS devices, in that case grabbing the slider knob will keep restarting the video from the beginning. If that can helps on your side.

[misteroneill]

Based on your description of what's happening, it sounds like your media server likely has missing capabilities like responding to range requests.

This sounds likely. In that case, there's nothing Video.js can do about it.

[shilongfeicool]

@mister-ben hello I encountered the same problem Have you resolved it yet

[mister-ben]

Without a reproducible test case there's nothing to investigate or resolve.

[weiz18]

In our case, the issue is due to the use of shadow component and slot element (#8158) with transform on top. VideoJs's calculation on drag will be off if you have transform applied outside of the component. As a workaround, you could probably try removing the transform if you have any

@mister-ben hello I encountered the same problem Have you resolved it yet

[periman2]

Hello, I also run into this issue and this is how I fixed it as a workaround:

function videoJSSeekbarExtention(player) {

    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 = 0;
        if(event.touches && event.touches.length > 0){
            var box = this.el_.getBoundingClientRect();
            let touchX = event.touches[0].clientX;
            if(box.right < touchX){
                touchX = box.right
            }
            if(touchX < box.left){
                touchX = box.left;
            }
            const distPercent = (touchX - box.left) / box.width;
            newTime = distPercent * this.player_.duration()
        } else {
            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;
    }
}

[himanshuranjann]

any updates on this issue here? @ubalensi-yoobic

[MSAJAL07]

Facing same issue. any updates on this issue ??