Текущие версии программ: After Effects CC 2018 v15.0.0  Premiere Pro CC 2018 v12.0.0

не стесняйтесь создавать новые темы для новых вопросов

Красивые часы, таймер, счетчик для стрима в OBS Studio без фоновых программ (на FlipClock.js)

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
Описания роликов со второго канала, который никак не связан с созданием видео и After Effects
Canonical Link
Аватара пользователя

Автор темы
aeplug
Санта
Санта
Сообщения: 1441
Зарегистрирован: 18 мар 2016 23:20
Откуда: С Ютуба
Благодарил (а): 3 раза
Поблагодарили: 170 раз

Красивые часы, таймер, счетчик для стрима в OBS Studio без фоновых программ (на FlipClock.js)


Теги:

Сообщение aeplug » 03 апр 2017 15:55

таймер для стрима OBS.jpg
таймер для стрима OBS.jpg (42.51 КБ) 6782 просмотра
таймер для стрима OBS.jpg
таймер для стрима OBS.jpg (42.51 КБ) 6782 просмотра

Захотелось мне сделать видимым на стриме счетчик времени до конца, чтобы зрители точно знали сколько еще осталось смотреть. Ну и чтоб самому не увлекаться. Также я хотел бы получить какой-нибудь сигнал о том, что время истекло и пора закругляться. Все эти проблемы я решил за счет использования FlipClock.js, библиотеки для HTML, которая позволяет в оригинально анимированной форме отображать часы, таймеры, счетчики и проч. Такой метод позволяет без проблем подключить любой нужный модуль времени через браузер в OBS Studio и не использовать другие программы, работающие в фоновом режиме во время стрима.
https://www.youtube.com/watch?v=mRWmLUF4Pzc

Краткое содержание урока


Я остановил свой выбор на библиотеке "FlipClock.js", потому что не хотел запускать лишние программы на компьютере (я намекаю на Snaz), тем более она осуществляют постоянную запись на диск для обмена данными с OBS через содержание локальных файлов. Ну зачем лишний раз мучить жесткий диск?! Они нынче и так дохлые, постоянно ломаются. А встроенная возможность читать файлы HTML напрямую в браузере OBS Studio теоретические должна решить все эти проблемы без дополнительного софта. Но тут, возможно, придется немного повозиться с самими HTML тегами и программированием на JavaScript.
Передо мной стояла задача вывести на экран для зрителей время обратного отсчета до конца стрима и подача звукового сигнала для ведущего, чтобы ему не нужно было постоянно сверяться с часами. Из файлов, скачанных с сайта FlipClock.js, я взял test.html и модернизировал его для своих целей.
html счетчик.jpg
html счетчик.jpg (11.52 КБ) 6764 просмотра
html счетчик.jpg
html счетчик.jpg (11.52 КБ) 6764 просмотра

В строчке с датой я решил каждый раз руками задавать время окончания (хотя можно сделать автоматический отсчет от текущего времени загрузки страницы +нужное время):

Код: Выделить всё

var futureDate  = new Date("October 9, 2014 12:02 PM EDT");

Формат даты я решил использовать более стандартный и привычный мне

Код: Выделить всё

var futureDate  = new Date(2017, 04-1, 4, 22, 00);

Данные записываются в виде: год, месяц (причем январь не 1-ый, а 0-ой!), число, час, минута. Я поменял тип счетчика на clockFace: 'HourlyCounter' и добавил функцию обратного вызова callbacks для проигрывания звукового файла когда счетчик достигнет нуля:

Код: Выделить всё

callbacks: {
    stop: function() {
        document.getElementById('audiotag1').play();
    }
}

Но для звука нужно еще в заголовок HTML прописать путь к этому файлу:

Код: Выделить всё

<audio id="audiotag1" src="aeplug_end_mixdown.wav" preload="auto"></audio>

Ну и сам файл добавить. На этом все, счетчик начинает убывать после загрузки через браузер в OBS Studio до назначенного времени и в конце выводит звуковой сигнал. Так как дата прописана руками, счетчик не сбрасывает между перегрузками и всегда указывает точное время до конца стрима. Именно то, что мне и было нужно!
Также можно перевести счетчик на русский язык, добавив параметр language в область инициализации

Код: Выделить всё

language: 'ru'

И настроив кодировку страницы HTML на UTF-8

Код: Выделить всё

<meta charset="utf-8">

счетчик на русском языке.jpg
счетчик на русском языке.jpg (15.2 КБ) 6763 просмотра
счетчик на русском языке.jpg
счетчик на русском языке.jpg (15.2 КБ) 6763 просмотра


. :info: .
Полезные ссылки:



Видео уроки для After Effects http://www.youtube.com/AEPlug
Платные консультации по работе в программах

Теги:


Вернуться в «LIVE канал»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей