Contents

Clips Discovery Guide

While you can migrate from v3 to v5, know that v5 is deprecated and will be shutdown in the future. We prefer that you migrated directly to the new Twitch API.

Introduction

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 Video & Clips guide.)

This guide cover two clips discovery use cases:

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

Also see the Clips Reference.

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:



   </span>Clips Carousel<span class="nt">


    id="clips-display">

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

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:

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:

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();
Docs Status Support Showcase Blog