Как сделать видео с редактором кода

11 марта 2022, 18:30

Недавно наткнулся на сайт freecodecamp.org так вот, там есть видео и уже в видео можно редактировать код, например вот это https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-text-field Как реализовать точно также?

Answer 1

Это не видео.

Это фрейм с сайта https://scrimba.com/

Сам сайт https://scrimba.com/ построен аналогично подобным редакторам, будь то jsfiddle или сайт с вашего примера.

Единственная разница - это микро видео сбоку в виде модального окна и его контрольные элементы на всю страницу снизу + в зависимости от текущей секунды подменяются/вставляются куски кода в редактор, подходящие конкретно к текущему моменту.

Как вам создать такое же:

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

Либо просто зарегистрируйтесь на SCRIMBA и используйте уже готовый функционал их сайта. Будет как в сайте который вы указали.