Текущие версии программ: After Effects CC 2017 v14.2.1  Premiere Pro CC 2017 v11.1.2

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

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

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

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

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


Теги:

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

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

Захотелось мне сделать видимым на стриме счетчик времени до конца, чтобы зрители точно знали сколько еще осталось смотреть. Ну и чтоб самому не увлекаться. Также я хотел бы получить какой-нибудь сигнал о том, что время истекло и пора закругляться. Все эти проблемы я решил за счет использования 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 КБ) 2180 просмотров
html счетчик.jpg
html счетчик.jpg (11.52 КБ) 2180 просмотров

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

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

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 КБ) 2179 просмотров
счетчик на русском языке.jpg
счетчик на русском языке.jpg (15.2 КБ) 2179 просмотров


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



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

Теги:


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

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

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