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

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

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

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


Теги:

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

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

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

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


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

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

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

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

А если вы вообще хотите убрать надписи "дней, секунд, минут" и т.д., то в CSS стиль в документе HTML можно добавить код для скрытия этих элементов (внутри тега <head> например, сразу после подключения flipclock.css):

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

<style>
   .flip-clock-label {
      visibility: hidden !important;
   }
</style>

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

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

var futureDate = new Date();
futureDate.setHours(21, 05);

При инициализации переменой futureDate в таком случае будет задано значение текущего времени, а потом перенастроено на время 21:05 текущего же дня.

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



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

Теги:


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

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

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