Почему такой низкий fps у HTML5 video при изменении его currentTime?

Question

[Денис Букреев]

kenzo.dev.grapheme.ru - при клике на слайд запускается интерактивное видео
И вот проблема: в сафари с ним все хорошо, а вот в остальных браузерах получается стремненькое слайдшоу.

Фактически, с помощью ползунка я имитирую таймлайн, без каких-либо лишних вычислений.
Все должно работать быстро, и в сафари работает, но в остальных браузерах все печально.
Как быть в такой ситуации?

UPD: Решение
Запихал обновление фрейма в requestAnimationFrame (первоначальный метод можно увидеть в комментарии вопроса)

И обнаружил, что фризы появлялись всегда в одних и тех же местах видео; поменяв формат (с mp4 на ogv) проблема с фризами ушла и видео теперь отображается максимально плавно. Возможно, хреново отрендерили видео, а конвертация убрала проблемные места, хотя конвертация в webm хорошего результата не дала.

Comments

[kulaeff]

Код будет?

[Денис Букреев]

kulaeff,

// метод класса, вызывается на каждое перемещение мыши во время захвата ползунка
    // it.player - элемент <video>
    // value - пиксели, на которое смещен ползунок
    // total - ширина ползунка
    setVideoTime (value, total) {
        let it = this;
        let percent = 100/total*value;

        it.player.currentTime = it.player.duration/100 * percent;
    }

Answer 1

[asd111]

На первый взгляд нигде не нашел window.requestAnimationFrame. Такая анимация делается через requestAnimationFrame.
https://codepen.io/ollieRogers/pen/lfeLc/

Comments

[Денис Букреев]

хмм, конечно почитаю сейчас про эту тему, на которую в свое время подзабил болтика
но накинул по примеру такой код и ничего не изменилось:

// метод класса, вызывается на каждое перемещение мыши во время захвата ползунка
    // it.player - элемент <video>
    // value - пиксели, на которое смещен ползунок
    // total - ширина ползунка
    setVideoTime (value, total) {
        let it = this;
        let percent = 100/total*value;


        function changeCurrentTime() {
            it.player.currentTime = it.player.duration/100 * percent;
        }
        window.requestAnimationFrame(changeCurrentTime);
    }

[asd111]

Денис Букреев, а так ?

setVideoTime (value, total) {
        let it = this;
        let percent = 100/total*value;


        function changeCurrentTime() {
            it.player.currentTime = it.player.duration/100 * percent;
            window.requestAnimationFrame(setVideoTime);
        }
        window.requestAnimationFrame(setVideoTime);
    }

[Kovalsky]

Денис Букреев, а разве вам не надо включать видео после там как пользователь закончил вести ползунок таймлайна?

[Денис Букреев]

Никита Полевой, нет, должна быть синхронизация с ползунком

[Kovalsky]

Денис Букреев, ну, можно конечно повесить бесконечный вызов animationFrame как вам подсказывают, но я бы предложил вам сделать по-человечески: вызывать animationFrame только когда пользователь двигает ползунок.

В первом варианте вы просто добавляете в VideoSlider.prototype.setVideoTime в конце вызов requestAnimationFrame( it.setVideoTime ) и вызываете setVideoTime в init. Во втором варианте в mousedown добавляете установку некого флага в true и вызов this.setVideoTime, а в mouseup установку того же флага в false, после чего в VideoSlider.prototype.setVideoTime надо делать вызов requestAnimationFrame( it.setVideoTime ) с проверкой того самого флага: true - вызвать запросить фрейм еще раз, false - не запрашивать.

[Денис Букреев]

Никита Полевой, но как мне вызывать requestAnimationFrame( it.setVideoTime ), если в it.setVideoTime надо посылать два параметра для работы метода?

[Kovalsky]

Денис Букреев, как самый простой вариант, можете в VideoSlider.prototype.dnd:mousemove оба параметра сохранять как свойства экземпляра VideoSlider, а потом использовать их в setVideoTime.

Ну и cancelAnimationFrame, соответственно, придётся вызывать.

[Денис Букреев]

в общем, чо каво
requestAnimationFrame помог сгладить показ видео, но дело было не только в скриптах, дело было в самих видеофайлах: в какой-то момент я понял, что фризы происходят на одних и тех же местах, попробовал поужимать видео, поменять кодеки, но помогла тупо перестановка source - ogv, форматированный из mp4 проигрывался отлично, а вот mp4 почему-то фризило на определенных местах.

[Kovalsky]

Денис Букреев, ага, что такое "чо каво" я не знаю, а по поводу видео как раз дошёл до того же, потестил всё и увидел что даже рабочие скрипты совсем не плавно мотают ваши видеофайлы. Бтв, вот получившийся код, если он вообще нужен:

// init
function() {
    var e = this;

    e._value = 0;
    e._total = 1;
    e.active = false;
    e.setVideoTime = e.setVideoTime.bind( e );
    ...
}

// setVideoTime

function() {
    this._requestAnimationFrame_id = requestAnimationFrame( this.setVideoTime );

    if (this.active) {
        this.player.currentTime = this.player.duration * this._value / this._total;
    } else {
        cancelAnimationFrame( this._requestAnimationFrame_id );
    }
}

// dnd:onMouseDown 

function() {
    e.active = true;
    e._requestAnimationFrame_id = requestAnimationFrame( e.setVideoTime );
    ...
}

// dnd:onMouseMove

function(r) {
    ...
    e._value = t;
    e._total = a;
    ...
}, 

// dnd:onMouseUp

document.onmouseup = function() {
    e.active = false;
    ...
}

[Денис Букреев]

Никита Полевой, спасибо
я тут залез на гуглоблог и нахватался там знаний шикарных, уже весь код переструктурировал, сижу довольный, все рабоает. Правда проблема с форматами пока есть, но с этим пусть разбираются видеомейкеры.

"Чо каво" - одна из коронных фраз Джесси Пинкмана в переводе Lostfilm

[Kovalsky]

Денис Букреев, природа проблемы с форматами неизвестна? Было бы интересно узнать, хотя бы от тех же видеомейкеров.

[Денис Букреев]

Никита Полевой, думаю, где-то они во время рендера просчитались.
Там на видосах есть замедления и именно в эти моменты браузер фризит проигрывание на .mp4.