Categories
WordPress

Let’s Think Out Loud: Making a Twitch Embed Handler

Earlier tonight, I said:

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.

Categories
Uncategorized

Should web designers know how to code?

Colleague Kevin Conboy on why coding skills are important for web design:

Your first instinctual reaction (as mine would be), is of course going to be that learning HTML is not learning web design. And of course – of course – that’s true. Just because you know Flash or HTML does not mean you’re a designer. I would never be brain-dead enough to suggest such a thing. The visual and strategic aspects of design are always more important than the technical ones – it’s just that the technical skills should exist alongside all of that to effectively uphold your decisions. This has been true of design as a discipline for decades.

The full article is on Alternate.org.

Vote for Kevin’s panel proposal for SXSW here.

Categories
Uncategorized

Blogging is powerful because it allows p…

Gah!

My code disappeared when it was parsed; I’ll be back later to try again.