Страница с чатами для стримеров

R3mbrant_renamed_619454_16022020 · 03.10.2012, 00:03 #1 #1

Не так давно решил себе сделать страничку с чатами для стримов. Вот что у меня из этого получилось: http://r3mbrant.narod.ru
В планах переделать отображение чатов гохи и эмпаертв и прикрутить счетчик зрителей. (не откажусь от помощи)

Создаете 2 файла, index.html и style.css (обязательно должны находиться в одной папке!), копируете в них то, что найдете по ссылкам:

http://pastie.org/private/mndg0zgjkxvvfslr9uhqfg - index.html

http://pastie.org/private/ij3yrzpsrn1syz3zpjugvg - style.css

style.css просто сохраняете и закрываете, а с index.html работаем дальше.

1.
<title>Чаты (User_Name)</title> -Вписываем свой ник.

2.
<a class="purple button" onclick="change('twitch')">Twitch</a> - Эта строчка и ниже ей подобные отвечают за кнопки вверху страницы. Можно настроить порядок, задать цвет и удалить ненужные.

3.
Собственно сами чаты. Как вписать свои данные смотрите таблицу.
display: inline - отображение чата по дефолту
display: none - отображение чата по нажатию кнопки

<div id="twitch" class="border" style="display: inline"><iframe id="twitch-iframe" scrolling="no" src="http://ru.twitch.tv/chat/embed?channel=user_name&popout_chat=true"></iframe></div>
user_name = Имя канала

<div id="own3d" class="border" style="display: none"><iframe id="own3d-iframe" scrolling="no" src="http://www.own3d.tv/chatpopout/live_channel_id"></iframe></div>
channel_id - можно узнать в разделе "My Livestreams"

<div id="goodgame" class="border" style="display: inline"><iframe id="goodgame-iframe" scrolling="no" src="http://www.goodgame.ru/allstreams2.php?ocd=chat&id=channel_id"></iframe></div>
channel_id - Самое быстрое найти ID в строке браузера на вашем канале

<div id="sc2tv" class="border" style="display: inline"><iframe id="sc2tv-iframe" scrolling="no" src="http://chat.sc2tv.ru/index.htm?channeId=channel_id&stop="></iframe></div>
channel_id - Так же как и на ГГ, только смотрится в окне редактирования стрима

<div id="goha" class="border" style="display: none"><div><iframe id="goha-iframe" scrolling="no" src="http://www.goha.tv/#!/user_name"></iframe></div></div>
user_name = логин на самом портале

<div id="empire" class="border" style="display: inline"><div><iframe id="empire-iframe" scrolling="no" src="http://www.empiretv.org/user/channel_id"></iframe></div></div>
channel_id - Так же как и на ГГ

4.
Теперь можно пользоваться локально, либо залив на какой-нибудь хостинг (например на яндекс.народ) либо попросить меня и я залью к себе.

Enjoy

update
В style.css в самом низу добавить выделенное жирным:
.button:hover, .blue.button:hover, .green.button:hover, .red.button:hover, .orange.button:hover, .purple.button:hover

ilyuzhko_renamed_786619_06122019 · 03.10.2012, 01:56 #2 #2

тема, еще бы с tort.fm Добавить)

Duke_renamed_1183066_26122022 · 03.10.2012, 05:46 #3 #3

благодарствую

iriv · 03.10.2012, 07:07 #4 #4

Спасибо!!!

Anidante_renamed_871205_23012021 · 03.10.2012, 11:13 #5 #5

Благодарствую :3

s1Paris_renamed_938305_26112020 · 03.10.2012, 15:59 #6 #6

R3mbrant, Уважаемый позволите слегка доработать ваш труд?

Duke_renamed_1183066_26122022 · 03.10.2012, 16:08 #7 #7

вопрос на засыпку, можно ли выдрать счетчик смотрящих с твича на отдельную страницу?

s1Paris_renamed_938305_26112020 · 03.10.2012, 16:43 #8 #8

Вот так http://apiwiki.justin.tv/mediawiki/i...nt.28stream.29

Добавлено через 11 минут
А точнее тут _http://api.justin.tv/api/stream/summary.xml?channel=имя_канала

Добавлено через 6 минут
Сразу же скажу, что для own3d тут http://api.own3d.tv/liveCheck.php?live_id=61229

R3mbrant_renamed_619454_16022020 · 03.10.2012, 17:01 #9 #9

Сообщение от s1Paris:

Уважаемый позволите слегка доработать ваш труд?

Сколько угодно :)

Duke_renamed_1183066_26122022 · 03.10.2012, 17:16 **#10** **#10**

Сообщение от s1Paris:

Вот так http://apiwiki.justin.tv/mediawiki/i...nt.28stream.29

Добавлено через 11 минут
А точнее тут _http://api.justin.tv/api/stream/summary.xml?channel=имя_канала

Добавлено через 6 минут
Сразу же скажу, что для own3d тут http://api.own3d.tv/liveCheck.php?live_id=61229

ну я нубас в программировании. моих познаний не хватает чтобы повесить счетчик на страницу по этим мануалам

iRavox_renamed_942421_17092020 · 03.10.2012, 17:28 **#11** **#11**

Большое спасибо. Ща буду копать) А то надоело over9000 окон по второму монитору таскать

~~Кодировка не имеет значения? ANSI или UTF-8?~~ Сам нашел ответ. Файлы сохранять в кодировке UTF-8.

Duke_renamed_1183066_26122022 · 03.10.2012, 17:46 **#12** **#12**

счетчик прикрутил. как теперь заставить его обновляться?

s1Paris_renamed_938305_26112020 · 03.10.2012, 18:12 **#13** **#13**

Смотря как прикрутил =D код скинь. помогу или переделаю =)

Duke_renamed_1183066_26122022 · 03.10.2012, 18:19 **#14** **#14**

Сообщение от s1Paris:

Смотря как прикрутил =D код скинь. помогу или переделаю =)

PHP код:


			
<script type="text/javascript" >

var channelName = "esnq";function showViewers(a){alert(a.viewers_count);}$.getJSON("http://api.justin.tv/api/stream/summary.json?channel="+ channelName + "&jsonp=?", function(a)

{document.getElementById("viewers").innerHTML  += a.viewers_count;});</script><div id="viewers" style="color: #fff">Viewers: </div>

Добавлено через 5 минут
как я понимаю есть варианты через нажатие на кнопку?

или можно динамическое обновление запилить?

s1Paris_renamed_938305_26112020 · 03.10.2012, 18:54 **#15** **#15**

Сообщение от eSnQ_Duke:

динамическое обновление запилить?

PHP код:


			
<script type="text/javascript">

    function interval() {

        $.getJSON("http://api.justin.tv/api/stream/summary.json?channel=esnq&jsonp=?",

            function(a){

                document.getElementById("ct").innerHTML = a.viewers_count;

            });

    }

    setInterval(interval, 10000);

</script>

<div id="viewers" style="color: #fff">Viewers: <span id="ct"></span></div>

Duke_renamed_1183066_26122022 · 03.10.2012, 19:10 **#16** **#16**

Сообщение от s1Paris:

PHP код:


			
<script type="text/javascript">

    function interval() {

        $.getJSON("http://api.justin.tv/api/stream/summary.json?channel=esnq&jsonp=?",

            function(a){

                document.getElementById("ct").innerHTML = a.viewers_count;

            });

    }

    setInterval(interval, 10000);

</script>

<div id="viewers" style="color: #fff">Viewers: <span id="ct"></span></div>

спасибо

iRavox_renamed_942421_17092020 · 03.10.2012, 19:30 **#17** **#17**

Заметил тенденцию. Страничка хрома с чатами потребляет 5% ресурса процессора и 110-112 мегабайт оперативной памяти. Стандартно как-то.

R3mbrant_renamed_619454_16022020 · 03.10.2012, 19:50 **#18** **#18**

Сообщение от s1Paris:

PHP код:


			
<script type="text/javascript">

    function interval() {

        $.getJSON("http://api.justin.tv/api/stream/summary.json?channel=esnq&jsonp=?",

            function(a){

                document.getElementById("ct").innerHTML = a.viewers_count;

            });

    }

    setInterval(interval, 10000);

</script>

<div id="viewers" style="color: #fff">Viewers: <span id="ct"></span></div>

Что-то не пашет, даже див не отображается.

Добавлено через 2 минуты
Ааа, я слепой!

style="color: #fff"

Duke_renamed_1183066_26122022 · 03.10.2012, 19:50 **#19** **#19**

Сообщение от R3mbrant:

Что-то не пашет, даже див не отображается.

у меня все робит . счетчики для 2х плееров сразу

s1Paris_renamed_938305_26112020 · 03.10.2012, 19:51 **#20** **#20**

так там куска кода не хватает потому что

а точнее куска с подключением jquery. Я так понял у дюка оно сделано уже было, раз работало, я только интервал бновления прилепил.

PHP код:


			
<script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>

Duke_renamed_1183066_26122022 · 03.10.2012, 19:52 **#21** **#21**

Сообщение от R3mbrant:

Ааа, я слепой! style="color: #fff"

Добавлено через 13 секунд

Сообщение от s1Paris:

так там куска кода не хватает потому что а точнее куска с подключением jquery. Я так понял у дюка оно сделано уже было, раз работало, я только интервал бновления прилепил.

ну да

iriv · 03.10.2012, 20:37 **#22** **#22**

Пожалуйста выложите для полных нубов готовый код встраиваемых счетчиков твича и овнеда, и подскажите куда и что вставлять на странице с чатами.

StreaMeX_renamed_946737_13042021 · 03.10.2012, 21:13 **#23** **#23**

Ой ребят мега полезная инфа !!!

Да присоединяюсь про счетчик можно для полных нубов

Duke_renamed_1183066_26122022 · 04.10.2012, 06:05 **#24** **#24**

Сообщение от StreaMeX:

Да присоединяюсь про счетчик можно для полных нубов

сначала добавляем этот скрипт внутрь тега хед

PHP код:


			
<head>
.........
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" charset="utf-8"></script>
..........
    </head>

затем внутрь тега боди добавляем этот код в место где хотим видеть отображение счетчика, не забываем вписать название своего канала в указанное место

PHP код:


			
<script type="text/javascript"> 
    function interval() { 
        $.getJSON("http://api.justin.tv/api/stream/summary.json?channel=название вашего канала с маленькой буквы&jsonp=?", 
            function(a){ 
                document.getElementById("ct").innerHTML = a.viewers_count; 
            }); 
    } 
    setInterval(interval, 10000); 
</script> 
<div id="viewers" style="color: #fff">Viewers: <span id="ct"></span></div>

если хотим сменить цвет меняем эту часть кода

PHP код:


			
style="color: #fff"

если же нам необходимо отображать несколько счетчиков то для вотрого нужно изменить этот параметр

PHP код:


			
document.getElementById("ct")

к ct можно дописать цифру или просто придумать другое значение, но надо поменять этот параметр и тут на точно такой же(который вы придумали)

PHP код:


			
<span id="ct">

StreaMeX_renamed_946737_13042021 · 06.10.2012, 02:23 **#25** **#25**

Спс огромное ....

Позже попробую