Embedding Videos & Clips

Non-Interactive Iframe Embed

1
2
3
4
5
6
7
8
    <iframe
        src="http://player.twitch.tv/?channel={CHANNEL}"
        height="720"
        width="1280"
        frameborder="0"
        scrolling="no"
        allowfullscreen="true">
    </iframe>

Parameters

Either Required

  • channel : Channel name for live streams. (ex. twitch)
  • video : Video ID for past broadcasts. Has no effect if channel is specified. (ex. v123456)

Optional

  • muted : Sets the initial muted state. true or false. Defaults to false.
  • autoplay : Automatically starts playing without the user clicking play. true or false. Defaults to true.
  • time : Start playback at the given timestamp for videos ONLY. Must be in the format 1h2m3s specifying hours, minutes, and seconds respectively. Defaults to the start of the video.

Video and Channel Metadata

Info such as video channel, length, description, viewcounts are available through the Videos API.

Interactive Embed

1
2
3
4
5
6
7
8
9
10
11
12
<script src= "http://player.twitch.tv/js/embed/v1.js"></script>
<div id="{PLAYER_DIV_ID}"></div>
<script type="text/javascript">
	var options = {
		width: 854,
		height: 480,
		channel: "{CHANNEL}",
		//video: "{VIDEO_ID}"
	};
	var player = new Twitch.Player("{PLAYER_DIV_ID}", options);
	player.setVolume(0.5);
</script>

Options

  • width:Number : width of embed player in pixels
  • height:Number : height of embed player in pixels
  • channel:String : channel name for live streams monstercat
  • video:String : video id for past broadcast v40464143
  • playsinline:Boolean : embed player plays inline for mobile iOS apps

Either a channel or a video can be loaded at one time.

Embed Player Calls

All calls are synchronous.

Playback Controls

pause():void - Pauses player

play():void - Begins playing specified content.

setVideo(videoid:String):void - Sets the video to the specified ID (e.g. v1234567890).

setChannel(channelname:String):void - Sets the channel to the specified channel name.

seek(timestamp:Float):void - Seeks to the specified timestamp (in seconds) in the video and resumes playing if paused. Does not work for live streams.

setQuality(quality:String):void - Sets the quality of the video. There are 5 available qualities: chunked, high, medium, low, mobile. Quality will default to chunkedif there are no transcodes available for the video. chunked is equivalent to the “Source” quality.

Volume Controls

setVolume(volumelevel:Float):void - Sets the volume to the specified volume level. Any value between 0.0 and 1.0.

setMuted(muted:Boolean):void - Mutes the player independent of the volume setting. Setting this to false unmutes the player.

getVolume():Float - Gets the volume level. This value will be between 0.0 and 1.0.

getMuted():Boolean - Gets if the player is muted. Returns true if muted, else false.

Player Status

getEnded():Boolean - Returns true if stream or video has ended, else false.

getDuration():Float - Returns duration of video in seconds. Does not work for live streams.

getCurrentTime():Float - Returns current timestamp in seconds for video. Does not work for live streams.

getQuality():String - Returns current quality of playback (e.g. high).

getQualities():String[] - Returns available qualities (e.g. chunked, high, medium, low, mobile).

isPaused():Boolean - Returns true if paused, else false. Buffering or seeking is considered playing.

getChannel():String - Returns the channel’s name. Doesn’t work for videos.

getVideo():String - Returns the video id. Doesn’t work for channels.

getPlaybackStats():Object - Returns an Object with the stats on the player and the current video or live stream.

Events

Events emitted by and defined by the player. Call addEventListener(event:String, callback:Function) to listen to events.

  • Twitch.Player.READY : Emitted when player is ready to accept function calls.
  • Twitch.Player.PLAY: Emitted when player is playing.
  • Twitch.Player.PAUSE : Emitted when player is paused. Buffering and seeking is not considered paused.
  • Twitch.Player.ENDED : Emitted when video or stream ends.
  • Twitch.Player.ONLINE : Emitted when loaded channel goes online.
  • Twitch.Player.OFFLINE: Emitted when loaded channel goes offline.

Twitch Clips Embed Player

Embedding a Clip is separate from embedding a live stream or VOD. The Clip embed player uses a different set of query parameters and doesn’t support the JavaScript interactive embed.

Non-Interactive Iframe Embed

1
2
3
4
5
6
7
8
<iframe
    src="https://clips.twitch.tv/embed?clip={CLIP_ID}"
    height="360"
    width="640"
    frameborder="0"
    scrolling="no"
    allowfullscreen="true">
</iframe>

URL Query Parameters

Required - clip: The "channel/slug" identifier. Eg: eleaguetv/ZealousMosquitoPeteZarollTie

Optional - autoplay : Automatically starts playing without the user clicking play. true or false. Defaults to true. - muted : Sets the initial muted state. true or false. Defaults to false.