Clips Discovery

Clips discovery endpoints enable you to discover user-generated, short-form video content about a game or channel or from a user’s followed games. You can retrieve Clips in multiple ways, such as for a specified time period or based on viewcount or trending popularity.

You can use Clips discovery in conjunction with video embedding to showcase the top content about your game or channel directly on your own Web site. (See the Embedding Twitch on Your Web Site guide.)

This guide cover two Clips discovery use cases:

  • Retrieving the trending Clips for a specified game.
  • Retrieving the most viewed Clips for a specified channel.

Both scenarios take advantage of video embedding, to show a complete, end-to-end experience.

Also see Clips reference documentation.

In this example, we use a simple HTML page that requests Clips for a specified game and embeds Clips for the top 10 trending Clips.

First, we create a simple HTML page with a div id that we will use later to display the embedded Clips:

1
2
3
4
5
6
7
8
<html>
<head>
   <title>Clips Carousel</title>
</head>
<body>
   <div id="clips-display"></div>
</body>
</html>

Second, we add JavaScript to the page, to request the Clips and handle the event when data has loaded:

1
2
3
4
5
6
7
var httpRequest = new XMLHttpRequest();

httpRequest.addEventListener('load', clipsLoaded);
httpRequest.open('GET', 'https://api.twitch.tv/kraken/clips/top?limit=10&game=Overwatch&trending=true');
httpRequest.setRequestHeader('Client-ID', 'uo6dggojyb8d6soh92zknwmi5ej1q2');
httpRequest.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json');
httpRequest.send();

Finally, we add JavaScript to display the Clips embeds on the page:

1
2
3
4
5
6
7
8
9
10
function clipsLoaded() {
    var clipsDisplay = document.getElementById('clips-display'),
        clipList = JSON.parse(httpRequest.responseText);

    clipList.clips.forEach(function(clip, index, array) {
        clipItem = document.createElement('div');
        clipItem.innerHTML = clip.embed_html;
        clipsDisplay.appendChild(clipItem);
    });
}

Example: Retrieving Most Viewed Clips for a Channel

For this example, we re-use the HTML and rendering above and simply change the JavaScript call in the second part, to get the most-viewed Clips:

1
2
3
4
5
6
7
var httpRequest = new XMLHttpRequest();

httpRequest.addEventListener('load', clipsLoaded);
httpRequest.open('GET', 'https://api.twitch.tv/kraken/clips/top?limit=10&channel=moonmoon_ow');
httpRequest.setRequestHeader('Client-ID', 'uo6dggojyb8d6soh92zknwmi5ej1q2');
httpRequest.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json');
httpRequest.send();