Авторизация / Register

[R3mbrant_renamed_619454_16022020]

Не так давно решил себе сделать страничку с чатами для стримов. Вот что у меня из этого получилось: 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]

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

[Duke]

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

[iriv]

Спасибо!!!

[Anidante_renamed_871205_23012021]

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

[s1Paris_renamed_938305_26112020]

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

Пока выглядит так 

[Duke]

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

[s1Paris_renamed_938305_26112020]

Вот так 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]

Originally Posted by s1Paris:

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

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

[Duke]

Originally Posted by 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]

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

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

[Duke]

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

[s1Paris_renamed_938305_26112020]

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

[Duke]

Originally Posted by s1Paris:

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

PHP Code:

<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]

Originally Posted by eSnQ_Duke:

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

PHP Code:

<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]

Originally Posted by s1Paris:

PHP Code:

<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]

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

[R3mbrant_renamed_619454_16022020]

Originally Posted by s1Paris:

PHP Code:

<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]

Originally Posted by R3mbrant:

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

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

[s1Paris_renamed_938305_26112020]

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

PHP Code:

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


[Duke]

Originally Posted by R3mbrant:

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

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

Originally Posted by s1Paris:

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

ну да

[iriv]

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

[StreaMeX_renamed_946737_13042021]

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

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

[Duke]

Originally Posted by StreaMeX:

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

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

PHP Code:

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


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

PHP Code:

<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 Code:

style="color: #fff" 


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

PHP Code:

document.getElementById("ct") 


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

PHP Code:

<span id="ct"> 


[StreaMeX_renamed_946737_13042021]

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

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