HTML5 плавное повторение видео, есть ли способ?

Question

[Yuriy Lyadov]

Всем привет!
Есть ли возможность сделать плавное повторение видео HTML5 ?
Видео прописано с loop повторяющееся, но в конце оно резко отрубается и с начало...
Есть ли способ сделать не резкое отрубание а плавное?

Answer 1

[Максим Морев]

Только зациклить в видео-редакторе таким образом, чтобы оно в конце приводилось к своему изначальному состоянию (первому кадру) как вам нужно. Это единственно правильный метод.

Есть ещё вариант: сделать два видео, расположить друг над другом, одно запустить, другое стоп, отслеживать прогресс воспроизведения и за пару секунд до окончания видео его плавно скрыть, другое видео в этот момент стартуем, ну и такую карусель устраиваем.
Но делать так настоятельно не рекомендую - это создание сложности на ровном месте, да и перфоманс такой себе получится.

Comments

[Yuriy Lyadov]

Вроде как при помощи jquery говорят сделать можно. Тока способ не нашел

[Максим Морев]

mills, я вас уверяю, что ни на jQuery, ни на React/Vue/Svelte/Angular/(подставьте сюда что угодно, что, как вам кажется, решит задачу) ничего кроме вышеописанного придумать вы не сможете, просто потому что проблема не в технологиях, а в том, как работает видео.

[Rustam Bainazarov]

Максим Морев, в принципе, можно, есть ряд штук для этого а-ля https://github.com/povdocs/video-transitions

Точнее, https://github.com/brianchirls/Seriously.js

Но сложно.

[Максим Морев]

Рустам Байназаров, штука прикольная, но не для этого всё-таки.
В контексте задачи автора толку-то от переноса на канву - всё равно идейно ничего окромя того, что я написал, не сделать. Да и фейд на канве явно не проще, чем на элементах :)

[Rustam Bainazarov]

Максим Морев, да, согласен, тут автору явно лучше сделать это в редакторе вручную.

[Yuriy Lyadov]

Рустам Байназаров, Согласен. Проще в видео редакторе сделать.

Answer 2

[Антон Шаманов]

технически можно, практически ни ты ни сервер такого вытянуть не сможете. я конечно знаю что ты слушать меня не станешь, поэтому объясню вкратце - ffmpeg + filter.