ВИДЕО js Перетаскиваемая панель прогресса - PullRequest
Новая
       17

ВИДЕО js Перетаскиваемая панель прогресса

0 голосов
/ 19 марта 2020

У меня самое новое видео js (версия: 7.6.6).

Можно ли сделать индикатор выполнения перетаскиваемым?

Текущее состояние: Когда Я перемещаю мышь на индикатор выполнения, во-первых, игрок ждет, пока загрузится несколько кадров, а затем перемещается.

Хочу: Я могу двигать мышь (с нажатием кнопки state = mouseDown) over progressbar Я хочу, чтобы время обновлялось вместо ожидания загрузки кадра и последующего обновления времени.

Мой текущий код: (видео js 7.6.6 и плагины включены ) - я использую 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
    }
});

Если у вас есть некоторые Советы или советы Я был бы очень рад.

PS: извините за мой английский sh

1 Ответ

1 голос
/ 19 марта 2020

Я создаю именно то, что я просил, если кому-то интересно :)

переменная видео js включена в файл видео js. js. (используется версия 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;
}
...