image

Выпуск HTML5 Video Editor

29.08.2022 Olga Krovyakova 620 Нет комментариев

HTML5 Video Editor — это профессиональный онлайн-инструмент для редактирования видео, который можно встроить в вашу систему управления контентом (Media Asset Management System, MAM), систему управления обучением (Learning Management System, LMS), отдел новостей (Newsroom) или систему здравоохранения (Healthcare system).

Редактор может работать как в облаке, так и локально, так как интегрируется с существующими системами.

Что особенно важно, при монтаже используется технология умного рендеринга.

Это означает, что вашим пользователям больше не нужно беспокоиться о качестве изображения полученного видео, поскольку оно останется таким же, как и в исходном файле.

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

Если ваши клиенты хотят вырезать и соединить один или несколько файлов, добавить аудио дорожку к видео файлу, добавить изображения или переходы между сегментами видео,  наложить текст на видео — все это возможно с онлайн редактором HTML5 Video Editor.

Мы усердно работали над редактором и рады объявить об официальном выпуске HTML5 Video Editor. Расскажем о некоторых новых интересных функциях.

 

Версия 1.2

Список функций

  • Поддерживаемые форматы файлов – MP4(AVC), MP3, M4A(AAC), JPG, PNG.
  • Загрузка файлов – локальный импорт, импорт с url, импорт с Dropbox и с Google drive, Amazon S3 Bucket (копирование файлов)
  • Вырезание, соединение, перестановка (фрагменты на временной шкале)
  • Наложение текста и изображения поверх видео. PNG (с прозрачностью)
  • Умное перекодирование (файлы могут быть разных параметров)
  • Добавление переходов между видео или их фрагментами
  • Наложение звука на видео
  • Возможность отменить/повторить последнее действие
  • Создание папок для удобного хранения файлов в медиатеке
  • Сохранение и использование проектов во время работы
  • Масштабирование временной шкалы
  • Поддержка MXF XAVC с уже существующими прокси-файлами (демонстрационный режим)
  • Аудио библиотека
  • Текст и изображения поверх видео. PNG (с прозрачностью)

В процессе разработки:

  • Поддержка XDCAM MXF
  • Загрузка XAVC/XDCAM (создание прокси)
  • Наложение озвучки на видео
  • Добавление фигур поверх видео в качестве аннотаций

 

Добавление файлов в медиатеку

Добавление или загрузка файлов в медиатеку редактора может быть осуществлена несколькими способами:

a) Локальный импорт – загрузка файлов с вашего компьютера

Доступны следующие опции:

Первая: нажмите на ссылку “upload media”или на надпись “Drag and drop your media here or upload media” чтобы добавить один или несколько файлов в медиатеку.  Вы можете добавить видео, аудио файл или картинку.

Пожалуйста, обратите внимание, что в настоящее время поддерживаемые форматы файлов: MP4(AVC) для видео, MP3 и M4A(AAC) для аудио, JPG и PNG для картинок.

upload media

В качестве альтернативы, нажмите на “Import” / “Import media” и выберите файл с вашего компьютера в открывшемся диалоговом окне.

picture 2

b) Перетаскивание файла

 

Откройте папку с вашим файлов и передвиньте его в раздел “Drag and drop your media here or upload media” медиатеки. Загрузка файла начнется сразу же, пожалуйста, подождите, пока она будет завершена. После этого можно добавить медиа файл на шкалу времени, в область со слоями.

c) Импортирование с URL

 

HTML5 Video Editor позволяет импортировать видео файл с любой ссылки, например, такой как ссылка YouTube.

Выберите “Import” / “Import URL” и вставьте вашу ссылку в открывшееся окно.

picture 3

youtube import

d) Импортирование с Dropbox и Google drive

 

Используйте эту опцию, если хотите импортировать файл в медиатеку редактора с Вашего аккаунта Dropbox или Google drive.

Вам потребуется войти в ваш аккаунт этих сервисов и выбрать медиа файл для импорта.

Picture 5

Dropbox import

e) Amazon S3 Bucket (копирование файлов)

 

Возможно произвести копирование файлов в медиатеку редактора  с сервиса Amazon S3 Bucket.

Amazon S3 Bucket – это облачное хранилище файлов для разработчиков. Доступ к файлам там осуществляется посредством API.

Amazon S3 Bucket

Имя корзины, секретный ключ и идентификатор ключа доступа используются для управления доступом к файлам.

Amazon S3 Bucket

Для удобства работы с медиатекой, когда в неё загружается большое количество файлов, мы также добавили строку поиска и фильтры для сортировки файлов по категориям (видео, аудио файлы, картинки).

Picture 7

Filters

 

Редактирование видео, соединение файлов, перестановка фрагментов файлов, умное перекодирование

 

Редактор позволяет работать с видео и аудио файлами и сразу же просматривать сделанные изменения – удалите ненужные сегменты и сохраните оставшиеся части.

 

По желанию, Вы также можете соединить несколько клипов в один файл. Просто поместите несколько клипов один за другим на шкалу времени, в один слой, и нажмите кнопку  “Publish” чтобы соединить их.

 

 

Также доступна перестановка фрагментов файлов на шкале времени.

Во время резки и соединения файлов используется умное перекодирование.  Это означает, что используемые для резки и соединения файлы могут быть различных параметров.

Добавление переходов

Чтобы сделать Ваши видео ролики боле привлекательными и интересными, мы добавили возможность вставки различных переходов между несколькими видео роликами или их частями.

В настоящее время доступны переходы: Постепенное появление (Fade In), Постепенное исчезновение (Fade Out) и Растворение (Dissolve).

 

Для добавления перехода в видео выберите раздел «Transitions» слева от редактора, захватите желаемый переход левой кнопкой мыши и перетащите его в нужное место – между двумя файлами / сегментами файла, в начало или конец конкретного файла / сегмента.

Вы также можете сделать специальные настройки для добавленного перехода.  Для этого выберите переход на слое, он будет подсвечен синим цветом, и нажмите на кнопку “Settings” как показано на скриншоте ниже.

Transitions settings

Наложение текста и графики

Если Вы желаете добавить заголовок, аннотации или любой текст к вашему видео файлу, вы можете это сделать с помощью HTML5 Video Editor.

Просто выберите вкладку “Text” на левой части редактора, перетащите шаблон с текстом “Text” в область шкалы времени и выберите свойства вашего текста: введите собственно сам текст, выберите его позицию, цвет, размер и другие характеристики.

Text add

Text settings

 

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

Примечание: изображение должно располагаться на слое над видео, а не под ним.

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

 

image over the video

image settings

Наложение звука

Наложение аудио файла поверх видео — одна из самых популярных задач.

Чтобы добавить звук к видео файлу, вам требуется сделать следующее:
  • добавьте видео файл на слой шкалы времени
  • выберите аудио файл из медиатеки
  • поместите его на слой под вашим видео файлом.
  • нажмите на кнопку “Publish” чтобы получить желаемый файл с видео рядом и наложенным звуком.

Перемещение слоев

Если необходимо, вы можете переместить слой посредством его перетаскивания вверх или вниз по шкале времени.

Просто используйте кнопки “Move Up” и “Move Down” чтобы управлять позицией слоя.

Возможность отменить / повторить последнее действие

 

Используйте кнопки Undo или Redo расположенные на левой части редактора, чтобы отменить последнее действие или повторить уже отмененное действие.

Undo/redo

Сохранение проектов

Когда Вы работаете с HTML5 Video Editor, вы можете сохранить ваш прогресс в проект. Проект создается автоматически. Список проектов доступен во вкладке “Projects”.

Здесь вы можете переименовать проект, удалить или скопировать его.

Чтобы начать новый проект, нажмите кнопку «New project».

Обратите внимание, что все ваши изменения будут применены к текущему проекту, до тех пор, пока вы не создадите новый проект, нажав кнопку «New project».

 

Projects

Масштабирование шкалы времени

Вы можете изменить масштаб шкалы времени используя контрол масштаба слева, в нижней части интерфейса редактора.

Picture 15

Работа с папками

 

HTML5 Video Editor позволяет создавать папки для группировки файлов.

Нажмите кнопку «Add folder», чтобы добавить новую папку в медиатеку.

Выберите нужный файл и переместите его в созданную папку.

Folders feature

Picture 19

Поддержка MXF XAVC с уже существующие прокси-файлами (демонстрационный режим)

MXF файлы достаточно большие по размеру и сложные, и с ними практически невозможно работать онлайн ввиду того, что браузер изначально их не поддерживает.

Прокси-файл — используемый для поддержки MXF XAVC файлов в HTML5 Video Editor , это предварительно закодированный файл с более низким разрешением, который решает эту проблему. Функция поддерживается в демонстрационном режиме.

Аудио библиотека

HTML5 Video Editor содержит аудио библиотеку, которая позволяет добавить музыку к вашему видео.

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

Вы также можете добавить некоторые звуковые эффекты к вашему видео.

Выпуск HTML5 Video Editor

Посетите домашнюю страницу онлайн редактора HTML5 Video Editor по ссылке:

https://www.solveigmm.com/en/products/html5-cloud-video-editing/

1 / 5 - 5

Плюсы и минусы использования онлайн видеоредактора

Миллионы людей, имеющих доступ к Интернету, заинтересовались видеоблогингом. Это легкодоступный и простой формат ведения влога, который привлекает самую широкую аудиторию. Однако большинство начинающих влогеров считают, что стандартного набора функций смартфона достаточно, чтобы стать успешным на YouTube и в других социальных сетях. Они ошибаются. Создание привлекательного видеоблога – это сложная работа, требующая использования различных профессиональных или […]