Здравствуйте,
У меня есть цель написать таймлайн по функционалу почти аналогичный тем, что используются в видеоредакторах.
Timeline (временна́я шкала, монтажная линейка или монтажный стол) — элемент интерфейса программы — полоса (лента), на которой визуально расположены все видео- и звуковые дорожки, и где собственно производится монтаж видеоряда. Расположение клипов на дорожках слева направо соответствуют времени их появления от начала при воспроизведении проекта. В качестве временных отсчетов может использоваться тайм-код.
— Wikipedia
Я попробовал найти готовое решение, полностью или частично покрывающее мои задачи.
Из найденных:
—
Simile Timeline
—
Timeline.js
—
plugins.jquery.com/b1njTimeline
—
goto.io/jqtimeline
Эти библиотеки не подходят, т.к. все они нацелены на представление данных, отсортированных по дате/времени, а также присутствует бесконечный скроллинг (время то безлимитно в обе стороны).
В моем случае используется время “в вакууме”, т.е. абстрарктные минуты и секунды, — длина видеоролика.
При попытке кастомизировать эти библиотеки потребуется переписать вплоть до половины всего функционала, потому что работа с датами у них в корне всего.
Мне же необходимы, как минимум:
— методы для управления извне
— события для реагирования на изменения таймлайна (например, пользователь управляет с помощью таймлайна чем-либо на странице)
— масштабирование шкалы (изменение временной линейки, как rulers в illustrator/photoshop и элементов на самой шкале)
— dragging элементов по шкале
В целом, я думаю, все хоть раз работали в видеоредакторах и понимают о чем я говорю, если нет — я попробую пояснить подробнее.
Может я что-то упустил при поиске и есть более подходящие решения? Подскажите, пожалуйста…
p.s. я уже начал писать решение с нуля, используя canvas нативно и svg с помощью библиотеки Raphael.js для отображения шкалы звуковой волны. Если ничего не найдется и будет целесообразно, возможно оформлю это красиво и выложу на github как плагин для какого-нибудь фреймворка или как независимое решение.
