Twitch Player that Updates on User Click

[Spectre_X7]

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

[JB940]

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();

[Spectre_X7]

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.

[JB940]

Sure.

check out this link first;
Embed Video API

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

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.

[tak_ada]

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

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

I hope these help.