Earlier tonight, I said:

I hate regular expressions.

— Ryan Markel (@ryanmarkel) March 22, 2014

This is because I am looking at writing a new embed handler for WordPress that would allow embedding of a Twitch stream, video, or highlight using just the URL of the video itself. Let’s collaborate on this, because I don’t know what I’m doing.

First, enumerate the options that are available.

Live Broadcasts

The URL to a live broadcast is just the channel URL, like this one:

http://www.twitch.tv/backlogathon/

(Twitch forces “www” but we should probably act like it’s possible it won’t be there when someone adds the URL manually.)

The embed for that URL looks like this:

<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=backlogathon" bgcolor="#000000”>
	<param name="allowFullScreen" value="true" />
	<param name="allowScriptAccess" value="always" />
	<param name="allowNetworking" value="all" />
	<param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
	<param name="flashvars" value="hostname=www.twitch.tv&channel=backlogathon&auto_play=true&start_volume=25" />
</object>
<a href="http://www.twitch.tv/backlogathon" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline; text-align:center;">Watch live video from backlogathon on www.twitch.tv</a>

The only thing in there that is provided in the URL is the channel ID, so the embed should assume using full $content_width in the embed handler and provide options for the rest in a shortcode.

There’s also a chat embed, but for the purposes of the media embed it’s not needed. Let’s leave that for the shortcode. We can probably omit the link addition to the bottom of the video, assuming that the blog owner will be adding that automatically.

Archived Broadcasts

Twitch archived broadcasts are referred to by channel ID, then a divider, then the ID of the archived broadcast, like this:

http://www.twitch.tv/backlogathon/b/512356452

The embed for that looks like this:

<object bgcolor='#000000' data='http://www.twitch.tv/widgets/archive_embed_player.swf' height='378' id='clip_embed_player_flash' type='application/x-shockwave-flash' width='620’>
	<param name='movie' value='http://www.twitch.tv/widgets/archive_embed_player.swf'>
	<param name='allowScriptAccess' value='always’>
	<param name='allowNetworking' value='all’>
	<param name='allowFullScreen' value='true’>
	<param name='flashvars' value='title=It%2BCame%2Bfrom%2Bthe%2BBacklog%2521&amp;channel=backlogathon&amp;auto_play=false&amp;start_volume=25&amp;archive_id=512356452’>
</object>
<br>
<a href="http://www.twitch.tv/backlogathon" class="trk" style="padding:2px 0px 4px; display:block; width: 320px; font-weight:normal; font-size:10px; text-decoration:underline; text-align:center;">Watch live video from backlogathon on TwitchTV</a>

The same bits from above would seem to apply here. We can omit the link at the end, and assume we want the video to span the content width.

Everything else we’ll leave to a shortcode, which will need some regex anyway.

Edited Highlights

Once you have edited a clip using the built-in tools, it’s available at a different URL, but much the same as the archive one:

http://www.twitch.tv/backlogathon/c/3915617

It generates this embed:

<object bgcolor='#000000' data='http://www.twitch.tv/widgets/archive_embed_player.swf' height='378' id='clip_embed_player_flash' type='application/x-shockwave-flash' width='620’>
	<param name='movie' value='http://www.twitch.tv/widgets/archive_embed_player.swf'>
	<param name='allowScriptAccess' value='always’>
	<param name='allowNetworking' value='all’>
	<param name='allowFullScreen' value='true’>
	<param name='flashvars' value='title=Titanfall%2B-%2BCTF%2Bon%2BCorporate%2B-%2B4.7%2BK%252FD%2BRun&amp;channel=backlogathon&amp;auto_play=false&amp;start_volume=25&amp;chapter_id=3915617’>
</object>
<br>
<a href="http://www.twitch.tv/backlogathon" class="trk" style="padding:2px 0px 4px; display:block; width: 320px; font-weight:normal; font-size:10px; text-decoration:underline; text-align:center;">Watch live video from backlogathon on TwitchTV</a>

Repeat the above.

I don’t think there are any other URL possibilities with Twitch, or at least I have not seen them yet.

So that’s the list of what needs to be figured; next step (which I’m currently avoiding and/or failing at) is writing the correct regex and the handler for it.