Генерировать динамическое "видео" в режиме реального времени с введенными данными?

ProgramBox

Генерировать динамическое «видео» в режиме реального времени с введенными данными?

Post author:admin
Запись опубликована:11 апреля, 2023
Post category:Вопросы по программированию

#javascript #css

Вопрос:

На этой странице я ввожу данные для «моделирования ипотечного кредита». и «видео» генерируется в ответ на введенные мной данные, это что-то вроде динамического «видео».

Это «видео» показывает связанные данные, которые я ввел.

Я просматриваю код и не вижу ничего, что показывало бы тег video или что-то в этом роде. Это выглядит как видео, начиная с панели управления, до опции полноэкранного режима и cc. В нем также есть аудио, хотя голос «видео» не упоминает никаких динамических данных.

Кто-нибудь знает, как это было сделано, или имеет пример того, как это сделать? есть ли какой-либо способ сделать то же самое, используя javascript, css и html?

Спасибо

это ссылка

https://www.grupobancolombia.com/personas/creditos/vivienda/simulador-credito-vivienda##sim-results

1. видео отображаются локально, то есть на клиентском компьютере.

2. @BekimBacaj извините за мое невежество, не могли бы вы объяснить еще больше, пожалуйста? вы говорите, что видео на самом деле создается со стороны клиента? то есть .mp4?

3. Демонстрация от individeo — это просто динамический svg статический звук. Загрузка другого веб-сайта отсюда занимает целую вечность, поэтому я не смогу сказать… но просто используйте свои devtools (и не позволяйте ему застрять на уровне обработчика кликов)

4. @Kaiido ну, концепция та же, что и по ссылке, которую я разместил, или из их официальной демонстрации. Итак, вы говорите, что анимации сделаны на svg, и добавляете аудио? Так вы думаете, что svg каким-то образом становится видео?

5. Видео нет, просто анимированный svg статический звук.

Ответ №1:

Видео из вашего вопроса на самом деле представляет собой очень большой SVG, как упоминал @Kaiido.

Анимационный сценарий очень сложен для понимания. Вот только часть этого:

Вы можете видеть, что в нем более 320 000 строк кода. И мы понятия не имеем, что означают все эти цифры. Конечно, некоторые из них являются временными кодами, некоторые — координатами, но для понимания нам нужен обратный инжиниринг.

На ваш первоначальный вопрос: is there any way to do the same using javascript, css, and html? конечно, есть ответ: yes . Возможна практически любая анимация.

Но нам нужны примеры. Хорошо, есть два возможных способа решить проблему анимации: использовать существующую библиотеку или создать свою собственную. Если вас интересует ваше собственное, просто спросите в комментариях.

Использовать библиотеку

Подсказка Google: animate.js библиотека.

Вот пример использования элементов управления (воспроизведение / пауза / возобновление / сброс / установка времени), как в реальном видеоплеере: нажмите.

Вот 3 примера использования SVG: перемещение по контуру, преобразование в другую форму, изменение свойств линии.

Дополнительные примеры использования animate.js находятся здесь.

Создайте свою собственную библиотеку

Я использую какую-то самописную библиотеку в одном из своих проектов. Идея заключается в том,:

есть массив keyframes — вот где меняется анимация. Каждый ключевой кадр имеет: время начала, длительность (аналогично «времени окончания»), список изменений (объектов или их свойств).
Я обновляю анимацию в requestAnimationFrame() цикле (поскольку моя анимация относится только к будущему, у меня нет элементов управления)
когда текущее время становится больше времени начала нового ключевого кадра, я удаляю предыдущий ключевой кадр из массива и применяю новые объекты / значения
если текущее время больше, чем начало ключевого кадра, но меньше, чем конец ключевого кадра, я использую lerp (линейную интерполяцию) для вычисления промежуточных значений объектов

Но это описание только для идеи, чтобы вы могли создать что-то, что соответствует вашим потребностям.

Аудио

Я думаю, audio — это просто обычный audio тег в HTML:

 <audio id="a">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Им можно управлять с помощью методов и свойств: посмотрите здесь. Пример:

 const a = document.getElementById('a');
a.currentTime = 0.8; // playing at 0.8 seconds from the start
a.play();

1. Большое вам спасибо, я ожидал такого ответа. эта библиотека кажется идеальной для того, что мне нужно. но вы советуете мне сделать это в svg или с элементами html?

2. @yavg Я не знаю, насколько велика и сложна ваша анимация. Я думаю, если у меня будет задача создать небольшое простое видео, я бы использовал просто обычные HTML-элементы (например <img src="image.svg"> , если у меня есть SVG из designer), потому что для меня проще использовать HTML, чем SVG. С другой стороны, если рядом со мной есть дизайнер, который может помочь мне со свойствами SVG, тогда я мог бы также использовать SVG (на самом деле не важно, какое свойство анимировать). Итак, ответ на ваш вопрос таков: зависит от сложности вашей анимации (некоторые вещи проще сделать в SVG).

Ответ №2:

Насколько я могу понять, они используют API, предоставленный компанией. То, что они делают, в основном принимает ваши входные данные, обрабатывает их и отправляет кучу информации в API в виде POST-запроса, затем API отвечает пользовательским URL, который они показывают вам с помощью iframe.

Если вы хотите узнать больше, вам следует проверить компанию, предоставляющую API. Индивидуальный

Кроме того, я не думаю, что это подходящее место для запроса чего-то подобного.

1. У вас есть какие-либо идеи, как я могу сделать что-то подобное? возможно ли это, используя только css и javascript?

2. Я действительно не знаю, как именно они это делают. Но, может быть, вы могли бы добиться чего-то подобного, создав видео с пробелами и расположив текст с помощью CSS, как наложение. Это возможно, но я не рекомендую это, потому что вам нужно быть в курсе многих вещей, таких как: разрешение экрана, события мыши в элементе video и тому подобное. Без сервера для обработки данных я действительно не думаю, что для этого есть достойное решение.

3. странно то, что вы не можете видеть .mp4 или что-то в этом роде

Ответ №3:

Похоже, что это SVG-видео, которое принимает ваши данные и отображает их в режиме реального времени. Это определенно то, что может создать любой, но это потребовало бы немного меньше усилий, если бы вы использовали API.