Стабилизация видео в Adobe Premiere pro (Warp Stabilizer)

Warp stabilizer Premiere Pro

Всем привет. Если в вашей камере нет встроенного стабилизатора, а так же если вы не используете для съемки видео штатив или внешний стабилизатор, то наверняка сталкивались с проблемой когда картинка в видео прыгает и ее колбасит в разные стороны. Это особенно заметно на длиннофокусных объективах. И, к счастью, это можно исправить уже после съемки, как говорится «на пост продакшене». Наиболее популярной программой для монтажа и цветокоррекции является Adobe Premiere Pro, в ней мы и будем делать стабилизацию для видео.

Для этого не требуется никаких дополнительных плагинов, это встроенная функция самой программы. В английской версии называется Warp stabilizer, а в русской — Стабилизатор деформации. Но если в русской dы будете искать в строке поиске по эффектам «стабилизатор», то результатов он не вам не выдаст, искать нужно именно «деформацию».

Стабилизация в Adobe Premiere Pro

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

Анализ стабилизации в премьер про

Настроек у этого эффекта не так много, поэтому разобраться не сложно.

efects-premiere-pro

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

параметры стабилизации видео премьер про

И Плавное движение, если нужно стабилизировать именно движение, чтобы оно было более плавным без резких скачков и дерганий. Чуть ниже есть еще одна настройка, которая отвечает за то, как именно нужно стабилизировать видео в Премьер про, с кадрирование или нет. Если выбрать один из параметров с кадрированием то края видео будут обрезаны и сама картинка будет чуть увеличена. Если вы снимаете в высоком разрешении, например 4к, то это не критично, если Full HD или HD, то нужно будет посмотреть на итоговый вариант и решить на сколько он пригоден для использования в проекте.

kadrirovanie premiere pro

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

Стабилизация premiere pro

Этих знаний будет достаточно для того, чтобы делать стабилизацию видео в Premiere Pro/ Если у вас есть какие-либо замечания, предложения, то пишите об этом в комментариях. Спасибо за внимание.

Сколько можно заработать на ютубе (на примере моего канала)

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

Youtube-канал Александр Маврин

Но для начала немного предыстории. Канал я создал в далеко 2010-ом году практически одновременно с этим блогом и на тот момент о заработке на видео совсем не думал. Идея была публиковать видео-уроки и инструкции в дополнении к статьям и так продолжалось много лет. Но в начале 2020 года начал рассматривать Youtube, как дополнительный источник дохода и мне стало очень интересно сколько же можно заработать на ютубе имея совсем немного подписчиков. Каждый ютубер знает что на канале есть видеоролики — локомотивы, которые дают просмотров больше остальных, как правило их несколько и мой канал не стал исключением. Но по разными причинам видео, которые имели 100 и более тысяч просмотров — попадали под разные ограничения и не были монетизированы. Поэтому коммерческих воспроизведений не очень много. Давайте посмотрим на статистику моего канала за текущий месяц, он как раз подходит к концу.

Аналитика Youtube

В этом месяце я активно публиковал видео и даже пошел на некий эксперимент. Начал заливать видео не свойственные моему каналу, но они стали попадать в рекомендации и давать гораздо больше просмотров чем обычно на моем канале. За счет чего общее количество просмотров выросло на 600%. И заработок на ютубе тоже подрос и доходил до $5.75, это максимальное значение за сутки. А так по 2-3-4 доллара в день.

Заработок на ютубе

И если прилагать достаточно усилий на развитие канала, то перспективы есть и можно дойти до заработка $10 в день и более, а это уже куда более ощутимая сумма, чем сейчас. Поэтому если вы задаетесь вопросом: сколько можно заработать на ютубе, то теперь примерно представляете, что чем больше будет просмотров у ваших видео, тем выше будет доход. на скриншоте выше видно, что такой показатель, как доход на тысячу просмотров говорит о том, что это стоимость всех без исключения просмотров. То есть если просмотров видео было 100000, то нужно 0.22 * 100 = $22 — поучим сумму, которая будет начислена за просмотры. Этот показатель плавающий и может как расти, так и уменьшаться, так же, как и цена за тысячу показов по воспроизведениям. Это стоимость за 1000 показов рекламы.

Если посмотреть на популярных блогеров, то можно понять что основной доход у них не от партнерской программы Youtube, а от рекламных контрактов, которые приносят гораздо больше денег. И остается только догадываться сколько можно заработать на Youtube-канале имея большую аудиторию и миллионы просмотров каждый день. Но по своему опыту могу сказать, что это не легко. Есть конечно исключения, когда один единственный ролик на канале становился вирусным и приносил его автору мега популярность, узнаваемости и щедро оплачиваемые рекламные контракты. Но в основном приходится трудится и регулярно выкладывать на канал видео. поэтому легким заработком это назвать никак нельзя. Но заработать на ютубе можно, а вот сколько — все зависит от вас.

Кастомные чекбоксы. Стилизация через CSS (Custom checkboxes)

custom-checkbox

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

Демо

Обычно стилизация чекбоксов на CSS происходит с использованием псевдоклассов. Я привязываюсь к тегу label, которого может и не быть рядом с чекбоксом, но я его оставлю. Вот так:

1
2
<input type="checkbox" class="checkbox" id="box"/>
<label for="box"></label>

Класс checkbox был написан для удобства напиcания CSS, а ID для привязки лейбла и изменения цвета в последующем. Теперь напишем сам CSS код и стилизуем чекбокс.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.checkbox {
  position: relative;
  z-index: -1;
  opacity: 0;
 
}
.checkbox + label {
  position: relative;
  cursor: pointer;
}
.checkbox + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.4);
  transition: .2s;
}
.checkbox + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  transition: .2s;
}
.checkbox:checked + label:before {
  background: #006cfa;
}
.checkbox:checked + label:after {
  left: 26px;
}

У нас практически все готово. Теперь для того, чтобы изменить фоновый цвет конкретного чекбокса, вы можете дописать такой код:

1
2
3
#box:checked + label:before{
  background: #8BC34A;
}

А если в сам label необходимо поместить какой-то текст, то начиная с 7 строки, где .checkbox + label нужно дописать padding, чтобы в итоге получилось вот так:

1
2
3
4
5
.checkbox + label {
  position: relative;
  padding: 0 0 0 60px;
  cursor: pointer;
}

На этом стилизация кастомных чекбоксов окончена. Кода получилось совсем не много. Спасибо за внимание.

Как сделать кнопку неактивной через JavaScript

Неактивная кнопка JS

Всем привет. Речь конечно же пойдет о кнопке на странице сайта или какого-то веб-приложения. Мы будем делать ее неактивной через JS, но для этого нам нужно создать условие, то есть в каких случаях кнопка будет неактивной, потому что оставлять ее в этом положении навсегда не имеет смысла. В большинстве случаев это делается при проверке каких-то данных в форме и там как раз есть условие — если проверка на заданные условия пройдена, то кнопку сделаем активной, если нет — нажатие на кнопку будет запрещено. Я уже писал про валидацию номера телефона на JS, поэтому мы можем частично воспользоваться кодом, который приведен в статье. неактивная кнопка а HTML выглядит так:

<button disabled="true">Кнопка</button>

Или так:

<input type="submit" disabled value="Кнопка"/>


А так же:

<button disabled>Кнопка</button>
<input type="submit" disabled value="Кнопка"/>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function validatePhone(phone){
 var regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
 return regex.test(phone);
}
 
let inp = document.querySelector('.inp');
let btn = document.querySelector('.btn');
btn.setAttribute('disabled', true);
 
inp.oninput = function(){
  let phone = document.querySelector('.inp').value;
  if (!validatePhone(phone)){
    btn.setAttribute('disabled', true);
  }else{
    btn.removeAttribute('disabled');
  }
}

Демо

Эта конструкция кода проверяет номер телефона в формате +7 и пока не будет введен верный номер в поле — кнопка останется неактивной. Как только номер будет соответствовать заявленным требованиям, то есть регулярному выражению — кнопка станет активной. То же самое мы можем сделать для Email адреса. Все, что нужно сделать, это поменять регулярное выражение в переменной regex, которое будет проверять именно Email.

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

Как повесить 2 функции по нажатию одной кнопки в JavaScript (onclick)

2 функции на одно нажатие в JS

Привет, друзья. Есть задача: по нажатию одной кнопки должно срабатывать 2 функции в JS. Решается это очень просто, но у многих начинающих изучать программирование почему-то возникают с этим трудности. Давайте разберем пример с двумя функциями на событии onclick. И как и в предыдущем примере, когда мы делали нажатие на копку в JavaScript, можно пойти двумя способами. На странице есть такая кнопка:

<button type="submit" id="submit">Нажми меня</button>

Первый вариант:

1
2
3
4
5
6
7
8
document.querySelector("#submit").onclick = function(){
  console.log("Результат работы функции 1");
send2();
}
 
function send2(){
  console.log("Результат работы функции 2");
}

В итоге в консоли мы увидим ожидаемый результат:

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

1
2
3
4
5
6
7
function send1(){
  console.log("Результат работы функции 1");
}
 
function send2(){
  console.log("Результат работы функции 2");
}

А потом написать либо так:

1
2
3
4
document.querySelector("#submit").onclick = function(){
send1();
send2();
}

Либо так:

<button type="submit" id="submit" onclick="send1(); send2();">Нажми меня</button>

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