After Effects
Premiere Pro
У нас появился ВК-чат для владельцев YouTube каналов. Присоединяйтесь, если вам есть что сказать! 
- таймер для стрима OBS.jpg (42.51 КБ) 135458 просмотров
- таймер для стрима OBS.jpg (42.51 КБ) 135458 просмотров
Захотелось мне сделать видимым на стриме счетчик времени до конца, чтобы зрители точно знали сколько еще осталось смотреть. Ну и чтоб самому не увлекаться. Также я хотел бы получить какой-нибудь сигнал о том, что время истекло и пора закругляться. Все эти проблемы я решил за счет использования 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 и модернизировал его для своих целей.
В строчке с датой я решил каждый раз руками задавать время окончания (хотя можно сделать автоматический отсчет от текущего времени загрузки страницы +нужное время):
Формат даты я решил использовать более стандартный и привычный мне
Данные записываются в виде: год, месяц (причем январь не 1-ый, а 0-ой!), число, час, минута. Я поменял тип счетчика на clockFace: 'HourlyCounter' и добавил функцию обратного вызова callbacks для проигрывания звукового файла когда счетчик достигнет нуля:
Но для звука нужно еще в заголовок HTML прописать путь к этому файлу:
Ну и сам файл добавить. На этом все, счетчик начинает убывать после загрузки через браузер в OBS Studio до назначенного времени и в конце выводит звуковой сигнал. Так как дата прописана руками, счетчик не сбрасывает между перегрузками и всегда указывает точное время до конца стрима. Именно то, что мне и было нужно!
Также можно перевести счетчик на русский язык, добавив параметр language в область инициализации
И настроив кодировку страницы HTML на UTF-8
https://www.youtube.com/watch?v=iHH77vRWFaE
Краткое содержание урока
Я остановил свой выбор на библиотеке "FlipClock.js", потому что не хотел запускать лишние программы на компьютере (я намекаю на Snaz), тем более она осуществляют постоянную запись на диск для обмена данными с OBS через содержание локальных файлов. Ну зачем лишний раз мучить жесткий диск?! Они нынче и так дохлые, постоянно ломаются. А встроенная возможность читать файлы HTML напрямую в браузере OBS Studio теоретические должна решить все эти проблемы без дополнительного софта. Но тут, возможно, придется немного повозиться с самими HTML тегами и программированием на JavaScript.
Передо мной стояла задача вывести на экран для зрителей время обратного отсчета до конца стрима и подача звукового сигнала для ведущего, чтобы ему не нужно было постоянно сверяться с часами. Из файлов, скачанных с сайта FlipClock.js, я взял test.html и модернизировал его для своих целей.
- html счетчик.jpg (11.52 КБ) 135440 просмотров
- html счетчик.jpg (11.52 КБ) 135440 просмотров
В строчке с датой я решил каждый раз руками задавать время окончания (хотя можно сделать автоматический отсчет от текущего времени загрузки страницы +нужное время):
Код: Выделить всё
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 (15.2 КБ) 135439 просмотров
- счетчик на русском языке.jpg (15.2 КБ) 135439 просмотров
А если вы вообще хотите убрать надписи "дней, секунд, минут" и т.д., то в 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 текущего же дня.
.
.Полезные ссылки:
- Плейлист YouTube: Создание и настройка стримов, OBS Studio
https://www.youtube.com/playlist?list=P ... tP9IXwxm9T - Как сделать красивый чат YouTube на стриме в OBS Studio
https://www.youtube.com/watch?v=flG4UZfdsS0 - Еще одно полезное видео на тему чата для стрима: Выводим чат YouTube крупным шрифтом для удобного чтения на втором мониторе
https://www.youtube.com/watch?v=uYucGI_FD4E - Open Broadcaster Software - OBS Studio
https://obsproject.com/ - FlipClock.js
http://flipclockjs.com/ - Snaz stream tool
http://jimmyappelt.be/preview/snaz/