Как делать и вставлять в текст статьи свои небольшие видеоролики

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

Когда это будет полезно:

Если вы ведете свой сайт, в котором делитесь обучающим контентом. Одно дело показывать в виде изображений то, о чем вы пишите, другое — показать короткое видео, секунд, например, на 20, как вы что-то делаете.

Допустим, взять этот сайт про обучение фотошопу. К каждой статье приходится выкладывать множество изображений, которые помогут начинающим пользователям разобраться в принципах работы. Например, как работает инструмент Точечная восстанавливающая кисть. Ну а можно сделать и вставить в текст статьи вот такой небольшой видеоролик:

Размер этого видео: 1,1 МБ. И это не предел, можно сделать размер еще меньше. Но согласитесь — и так уже неплохо. Он весит как несколько изображений, поэтому не будет создавать проблем при загрузке и отображении страницы статьи. А значит для использования таких видеороликов нет препятствий.

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

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

Как делать небольшие видеоролики для сайта

Как уже писал выше, программ для захвата видео с экрана существует много. Я не сравнивал их между собой и не искал «ту единственную», которая меня удовлетворит на все сто процентов.

Но мне посчастливилось сразу обратить внимание на программу, функционал которой меня полностью устроил, и просто отпала необходимость искать что-то другое. Я выбрал Movavi Screen Capture Studio. Нет, это не реклама!

Смотрите сами как с ней просто работать.

Шаг 1 — откройте Movavi Screen Capture Studio.

Вас встретит стартовый экран с перечнем всех возможностей. Выберите Захват экрана.

Шаг 2

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

Шаг 3

Теперь, когда размер и участок экрана определен, появится окно с настройками.

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

Я обычно выбираю размер, как для YouTube, — 854×480 пикселей.  Он немного весит, комфортно смотреть как в свернутом плеере, так и при растяжении на весь экран. К слову, далее по тексту будет еще одна настройка, которая влияет на качество и вес видеоролика.

Во вкладке Захват особо отмечу возможность установить:

• Запись нажатий клавиш — на экране будут появляться названия клавиш;
• Запись курсора мыши — будет виден сам системный курсор мыши;
• Подсветка курсора мыши — вокруг курсора будет желтый круг;
• Подсветка щелчков мыши — при щелчке мыши от курсора будет исходить «волна» в виде красной обводки;
• Звук щелчков мыши — на видео будут наложены звуки, сопровождающие клики на мышь.

Шаг 4 — Запись.

Когда все настройки будут установлены, нажмите на запись — кнопка REC.

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

Полезно предварительно прикинуть каких размеров будет область и перетащить все необходимые элементы для показа в эту область.

Шаг 5 — Редактирование.

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

(Нажмите, чтобы увеличить)

Шаг 6 — Сохранение видео.

Чтобы перейти к сохранению видео, нажмите Сохранить как… 

Появится последнее диалоговое окно, которое позволит сделать следующее:

• Выбрать формат, в котором следует сохранить видео. Для сайта нужно выбрать mp4.
• Можно еще раз подкорректировать итоговое разрешение видеоролика.
• Самое классное, что все ваши манипуляции будут сразу влиять на итоговый размер видео и можно смотреть как он изменяется в зависимости от настроек. А если нажать на Размер, то можно вручную настроить каким будет качество. Это позволяет найти золотую середину между качеством видео и его размером, что крайне важно для скорости загрузки самого видео и страницы с ним.
• Ну и стандартно указать имя файла и место куда нужно сохранить.

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

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

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

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