Interactive Twitch player doesn’t work with just video Id in the options

Question

I am using Twitch API in order to embed and interactive video player in my website and interact with it using Twitch API in Javascript.

I use this code:

 var options = {
        width: 560,
        height: 315,
        autoplay: true,
        control: true,  
        video: "ZealousPowerfulHyenaArsonNoSexy"  
    };
    gPlayer = new Twitch.Player("youtubeplayer", options);

When I run the code I get an error:

t.channel is not implemented

When I add a channel, it works. According to the guide, I don't need a channel in order for the interactive video clip to be displayed.

I quote from the guide: "channel -or- video -or- collection".

How can I make is work without using a channel information?

score 0 · Answer 1 · answered Jul 07 '18 at 09:12

The issue is that videos and clips aren't equal to Twitch no matter how much they should be. For instance, this will work fine with a VOD similar to what you're trying to achieve, but when using a clip slug it will not load any content.

<script src="http://player.twitch.tv/js/embed/v1.js"></script>
<div id="youtubeplayer"></div>
<script type="text/javascript">
  var options = {
    width: 800,
    height: 500,
    video: "279365619"
  };
  var player = new Twitch.Player("youtubeplayer", options);
  player.setVolume(0.5);
</script>

Note that snippet won't show results here, but I made a CodePen as well.

Under the video attribute I have what Twitch refers to as a video id whereas what you're using is a clip slug which aren't equal or interchangeable. The video attribute requests a number while our clip's slug is a string.

Embedding a clip is different than embedding a live stream or VOD. The embedded clips player uses a different set of query parameters and does not support the JavaScript interactive embed.

What they're saying here, is that unfortunately clips do not currently have an interactive frame, and per their roadmap for the Helix introduction, it doesn't seem that's likely to change.

So as it stands now, without using a third party or creating your own interactive frame (I have done so for clips, but can't get an example until I'm home from vacation), you will only be able to use their bland iFrame.

<iframe src="https://clips.twitch.tv/embed?clip=ZealousPowerfulHyenaArsonNoSexy" height="315" width="560" frameborder="1" scrolling="no" allowfullscreen="true">
</iframe>

Once more for security reasons the snippet won't run here, but I've included both options in my CodePen example for you. I hope this helps clarify for you, and I will post back to that CodePen with an example of my custom overlay when I can.

Interactive Twitch player doesn’t work with just video Id in the options

1 Answers1