Как сделать на стриме таймер

Как сделать на стриме таймер

Как сделать на стриме таймер

Как сделать на стриме таймер

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

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

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 в область инициализации
И настроив кодировку страницы HTML на UTF-8
счетчик на русском языке.jpg счетчик на русском языке.jpg (15.2 КБ) 10254 просмотра счетчик на русском языке.jpg счетчик на русском языке.jpg (15.2 КБ) 10254 просмотра

. .


Источник: http://aeplug.ru/forum/viewtopic.php?t=446


Как сделать на стриме таймер

Как сделать на стриме таймер

Как сделать на стриме таймер

Как сделать на стриме таймер

Как сделать на стриме таймер

Как сделать на стриме таймер

Как сделать на стриме таймер

Как сделать на стриме таймер

Как сделать на стриме таймер

Как сделать на стриме таймер

Как сделать на стриме таймер