Видео отстает при использовании currentTime

Question

У меня есть простая HTML-страница, и я играю видео на этой странице.Я использую полосу прокрутки в качестве панели поиска.Другими словами, видео воспроизводится, пока пользователь выполняет прокрутку.

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

Видео из примеров работают гладко, но видео, которые я создал, они запаздывают.Я не могу понять причину.Я пробовал разные комбинации FPS, разрешения, битрейта, но они не помогли.

Единственное отличие среди видео, которое я могу найти, это то, что при воспроизведении видео из примеров я могу искатьлюбой кадр на MPC (K-Lite).Я могу искать только 3-4 кадра на видео, которые я создал.Так что проблема может быть связана с этим.Я не уверен.Если это из-за этого, мне нужен способ сделать видео полностью доступным для поиска.Как мне это сделать?

https://akinuri.github.io/sticky-scrollable-video/ (онлайн-демонстрация)
https://github.com/akinuri/sticky-scrollable-video (репо, проверить детали)
https://www.audi.com.tr/tr/web/tr/modeller/a8/a8-l.html (липкая прокруткавидео)
codepen.io/ollieRogers/pen/lfeLc (прокручиваемое видео)

Онлайн-демонстрация воспроизводит плавное / доступное видео (от Audi).Чтобы увидеть разницу между видео, вам нужно скачать проект с GitHub.Два видео (Audi и Chrome_ImF.ogv) гладкие / доступные для поиска.Два других (Chrome_icon, Bedroom.mp4) являются проблемными / лаги (только несколько кадров доступны для поиска).

---

_{Chrome / Opera обеспечивает более плавное воспроизведение, чем Firefox.Я использую Premiere Pro для видео.}

_{Редактировать: Пока связанный вопрос говорит о той же проблеме, я не могу пометить свой вопрос как дубликатэтогоЗачем?Ему 3 года, у него только 1 ответ, ответ не принят, и он плохой.Редактирование видео не является моим основным занятием, поэтому я не могу сделать прямой вывод из ответа.Ответы должны быть даны продуманно.Мой Q / A более подробно.Поэтому я сомневаюсь, что любой, кто просматривает оба вопроса, предпочел бы старый.}

Answer 1

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

Я искал способ изменить ключевые кадры (в Premiere Pro)и я нашел его в

Export Settings (CTRL+M) -> Video -> Advanced Settings -> Key Frame Distance

Расстояние ключевого кадра - это максимальное количество кадров до того, как кодер вставит i-кадр, ...

^{https://forums.adobe.com/message/9451877#9451877}

Этот параметр не был отмечен и был установлен на 72.Таким образом, в зависимости от FPS, он составляет 1-2 секунды.Чтобы все кадры были доступны для поиска, я установил 1, и это сработало.

Обновление: Оказывается, что воспроизведение видео с низким KFD на мобильных устройствах (Chrome, Samsung Internet) проблематично.Хотя StickyScrollableVideo может воспроизводить видео (используя currentTime), оно медленное.С другой стороны, video.play() не удается.Видео просто не воспроизводится.Поэтому вместо использования StickyScrollableVideo на мобильном телефоне я отключу его и просто воспроизведу видео.И чтобы это сделать, мне нужна версия видео с более высоким KFD.Итак, я подготовил два видео;один с KFD: 1 для рабочего стола / StickyScrollableVideo, а другой с KFD: 25 (FPS) для мобильного / video.play().

Проблема может быть замечена здесь: https://akinuri.github.io/in-view-tracker/video.html

Первыйвидео с KFD: 1, а второе - с KFD: 25.Нажмите на видео для воспроизведения / паузы.

Answer 2

Вы должны знать, что корень этой ошибки - использование процессора для полной работы над страницей (ваши сотрудники видео + все другие работы). В вашем примере выглядит как ошибка видеокодера (mp4). Чтобы получить полный отклик для всех браузеров, вам необходим видео формат (safari, firefox, chrome).

• Одним из способов является теория: используйте веб-работников (новый поток) для воспроизведения видео и навигации по коду.

• Второй - рисование видео-объекта прямо в canvas2d. В программе Canvas вы можете легко перейти к текущему кадру.

  Вы пробовали на другом (лучшем) компьютере с аналогичной средой и той же версией браузера?

Это исправит вашу проблему на 50%. Просто конвертируйте mp4 в формат ogg (.ogv)

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>