# Twitch Player that Updates on User Click

**URL:** <https://staging-discuss.dev.twitch.com/t/twitch-player-that-updates-on-user-click/5500>\
**Category:** API\
**Created:** [March 30, 2016, 6:14pm UTC](https://staging-discuss.dev.twitch.com/t/twitch-player-that-updates-on-user-click/5500 "2016-03-30T18:14:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Spectre\_X7](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Spectre\_X7](https://staging-discuss.dev.twitch.com/u/Spectre_X7)\
**Post date:** [March 30, 2016, 6:14pm UTC](https://staging-discuss.dev.twitch.com/t/twitch-player-that-updates-on-user-click/5500/1 "2016-03-30T18:14:03Z")

</div>

Hello,

I am creating a webpage for media and I would like to have a twitch player, however, I don’t want to be forced to only embed one stream as the website I make is a community website. My goal is to have a main twitch player at the top with the corresponding chat for the current stream being shown with a list of streamers on the bottom, and when users select different streamers’ names or icons, instead of it taking them to [twitch.tv](http://twitch.tv) or playing a smaller player, the main twitch player & chat switches to the persons stream and chat they just clicked.

Any ideas on how I would achieve this?

---

<div class="post-metadata">

**Author:** ![JB940](https://avatars.discourse-cdn.com/v4/letter/j/eb9ed0/32.png) [@JB940](https://staging-discuss.dev.twitch.com/u/JB940)\
**Post date:** [March 30, 2016, 7:02pm UTC](https://staging-discuss.dev.twitch.com/t/twitch-player-that-updates-on-user-click/5500/2 "2016-03-30T19:02:09Z")

</div>

Use the Embedded Twitch Javascript version.

Combined with JQuery, you can then do an onClick on another stream, Which does the following in pseudo:

```
mainplayer.pause();
animateMainOut(2); // Some kind of custom function that animates the currentplayer out
 // ^ The 2, or whatever, should be some kind of index it moves the player to
// not sure what kind of lay-out you want to use so, may or may not use an argument
animateIn($(this)); // custom function animating the clicked object.
mainplayer = this.player;
mainplayer.play();
```

---

<div class="post-metadata">

**Author:** ![Spectre\_X7](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Spectre\_X7](https://staging-discuss.dev.twitch.com/u/Spectre_X7)\
**Post date:** [March 30, 2016, 7:38pm UTC](https://staging-discuss.dev.twitch.com/t/twitch-player-that-updates-on-user-click/5500/3 "2016-03-30T19:38:31Z")

</div>

Thanks for a swift response, I’m not really familiar with the javascript version, care to elaborate further? Also, I’m new to all of this, If you don’t mind, I’d need a detailed explanation on how to proceed.

---

<div class="post-metadata">

**Author:** ![JB940](https://avatars.discourse-cdn.com/v4/letter/j/eb9ed0/32.png) [@JB940](https://staging-discuss.dev.twitch.com/u/JB940)\
**Post date:** [March 31, 2016, 12:04pm UTC](https://staging-discuss.dev.twitch.com/t/twitch-player-that-updates-on-user-click/5500/4 "2016-03-31T12:04:52Z")

</div>

Sure.

check out this link first;  
[Embed Video API](https://github.com/justintv/Twitch-API/blob/master/embed-video.md)

The first option is the Iframe, as it says, this is uninteractive. This is not what we want.  
We want to interact with it, since having 10 streams open on a page will eat internet and slow down a lot

So then we have the interactive Embed. Great!  
As you can see, it consists of javascript functions (denoted by `script` tags)

I’ll explain quickly what happens here.

`<script src= "http://player.twitch.tv/js/embed/v1.js"></script>`  
“installs” the script on the page, the browser will load this

`<div id="{PLAYER_DIV_ID}"></div>`  
The div were the player will be in. In our example we will call this “MainPlayer”

`<script type="text/javascript">... </script>`  
This indicates we are writing our own script inbetween the tags.

`var options = { width: 854, height: 480, channel: "{CHANNEL}", //video: "{VIDEO_ID}" };`  
This creates a variable called `options` with The settings as given.  
{CHANNEL} would be the channel name.  
example: `channel: "Spectre_X7",`

`var player = new Twitch.Player("{PLAYER_DIV_ID}", options);`  
Here we create a new twitch player. this is basically the object that shows the stream.  
Replace {PLAYER\_DIV\_ID} with the name of the div.

Below this on the API link, it will give you all commands you can use on the javascript object.  
I will give you a simple example here:  
[jsfiddle example](https://jsfiddle.net/gvL2m0cq/12/)

NOTE: this does not work on JSFiddle, it doesn’t accept non https scripts, but if you copy this to a local page you’ll see it works. Also; you probably need something to deal with offline streams.  
It’s just an example of how you could swap them out.

---

<div class="post-metadata">

**Author:** ![tak\_ada](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/tak_ada/32/258_2.png) [@tak\_ada](https://staging-discuss.dev.twitch.com/u/tak_ada)\
**Post date:** [April 14, 2016, 11:46pm UTC](https://staging-discuss.dev.twitch.com/t/twitch-player-that-updates-on-user-click/5500/5 "2016-04-14T23:46:31Z")

</div>

I was in a similar situation a while back. I made a couple of projects that implemented what you’re trying to do.

This one’s pretty old but it is still running. It is a little easier to understand as it is mostly using a mix of jquery and angular:

> **[tadachi/srlplayer2](https://github.com/tadachi/srlplayer2)**
>
> srlplayer2 - Stream aggregator: one place to quickly watch and switch between twitch, hitbox streams and more.

This one is much newer and uses react and webpack for bundling and building it. It is more difficulte to understand than the previous.

> **[tadachi/streamy](https://github.com/tadachi/streamy)**
>
> streamy - Self-proclaimed fastest stream discoverer/viewer/switcher for Twitch. Support for Hitbox too! (beta)

I hope these help.

---

<div class="post-metadata">

**Author:** ![system](https://d2spem0quai2ol.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://staging-discuss.dev.twitch.com/u/system)\
**Post date:** [May 14, 2016, 11:46pm UTC](https://staging-discuss.dev.twitch.com/t/twitch-player-that-updates-on-user-click/5500/6 "2016-05-14T23:46:36Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.