YouTube hosts 360 videos. Here's one of mine, wandering through the Houses of Parliament. You can drag the video to see all around.

If you let YouTube-DL download the "best" version, you'll end up with a video which looks like this:

Each lens' view has been horizontally stretched, and then stitched into an over/under view. This is in Google's Equi-angular Cubemap format. Grim!

There are two options available to you to get the equirectangular version needed to playback easily on Linux

Easy Way

Running youtube-dl -F https://www.youtube.com/watch?v=... will show you all the formats available.

136          mp4        1280x720   720s 2325k , avc1.4d401f, 30fps, video only, 24.94MiB
248          webm       1920x960   1080s 2375k , vp9, 30fps, video only, 25.53MiB
137          mp4        1920x960   1080s 4127k , avc1.640028, 30fps, video only, 41.92MiB
18           mp4        640x360    360s  705k , avc1.42001E, 30fps, mp4a.40.2@ 96k (44100Hz), 7.63MiB
22           mp4        1280x720   720s 2514k , avc1.64001F, 30fps, mp4a.40.2@192k (44100Hz) (best)

I found that -f 22 worked. And there's a way to test that!

If you run ffmpeg -hide_banner -i filename.mp4 then you should see this in the metadata:

Side data:
   stereo3d: 2D
   spherical: equirectangular (0.000000/0.000000/0.000000) 

That's the magic which tells a video player that this is a spherical / 360 video.

If you play back the video in, say, the default Linux video player, it will look like this:

It's a weird view out of both lenses simultaneously. Yeuch!

But if you play it using VLC version 3 or above, you'll be able to drag the video around.

There is a downside. This only gets the 720p version. If we want the full resolution version, we need a bit more trickery.

Hard Way

There's a bug in YouTube which means YouTube-DL sometimes gets served up slightly weird formats. The fix is to pass a blank user agent:

youtube-dl --user-agent "" ...

Now, when you download the video, you'll get the full resolution copy in equirectangular format. HORRAY! But without the correct metadata. BOO!

This is because ffmpeg strips out Side data. *sigh*

So, run this:

youtube-dl --user-agent "" -k https://www.youtube.com/watch?v=...

That tells YouTube-DL to keep the original video and audio separate. They need to be merged with the standard compliance mode to unofficial .

ffmpeg -i video.mp4 -i audio.m4a -c:v copy -strict unofficial spherical.mp4

Phew! Easy when you know how, eh?

This blog post gives a more detailed explanation than my answer to this StackOverflow question.

Here's what the subtitles look like when you view a video:

And here's what the code which generates those subtitles looks like:

00:00:00.930 --> 00:00:03.080 align:start position:0%

and<00:00:01.230><c> now</c><00:00:01.439><c> can</c><00:00:01.709><c> we</c><00:00:01.800><c> have</c><c.colorCCCCCC><00:00:01.920><c> a</c></c><c.colorE5E5E5><00:00:01.979><c> round</c><00:00:02.370><c> of</c><00:00:02.460><c> applause</c></c>

00:00:03.080 --> 00:00:03.090 align:start position:0%
and now can we have<c.colorCCCCCC> a</c><c.colorE5E5E5> round of applause
 </c>

00:00:03.090 --> 00:00:04.849 align:start position:0%
and now can we have<c.colorCCCCCC> a</c><c.colorE5E5E5> round of applause
for</c><c.colorCCCCCC><00:00:03.120><c> Terrence</c><00:00:03.629><c> Edwards</c><00:00:03.899><c> and</c><00:00:04.170><c> his</c></c><c.colorE5E5E5><00:00:04.200><c> talk</c><00:00:04.529><c> the</c></c>

00:00:04.849 --> 00:00:04.859 align:start position:0%
for<c.colorCCCCCC> Terrence Edwards and his</c><c.colorE5E5E5> talk the
 </c>

WTF? You're looking at WebVTT - Web Video Text Tracks Format - this allows words to be displayed as they're said. Each sentence and word is given a time-code and a position, colours are also possible to identify multiple speakers. It's great for subtitles, but it is lousy if all you want to do is read a transcript.

So, how do we convert the above to something like:

and now can we have a round of applause for Terrence Edwards and his talk the connected house of horrors

Python - the quick and dirty way

Using the open source WebVTT-PY Python library, we can directly get the raw text of each line of the subtitles

import webvtt
vtt = webvtt.read('subtitles-en.vtt')

vtt[0].text
' \nand now can we have a round of applause'
vtt[1].text
'and now can we have a round of applause\n '
vtt[2].text
'and now can we have a round of applause\nfor Terrence Edwards and his talk the'
vtt[3].text
'for Terrence Edwards and his talk the\n '
vtt[4].text
'for Terrence Edwards and his talk the\nconnected house of horrors good'
vtt[5].text
'connected house of horrors good\n '
vtt[6].text
'connected house of horrors good\nafternoon'

Manually looking through the text, we can see that the 2nd element has the first complete sentence, then the 6th. Starting at 2, we can increment by 4 and grab elements 6, 10, 14, etc to build up a transcript. Does that work?

Yes! This is what happens if we slice the array:

sub = vtt[2::4]

sub[0].text
'and now can we have a round of applause\nfor Terrence Edwards and his talk the'
sub[1].text
'connected house of horrors good\nafternoon'
sub[2].text
'AMF thank you so much for for coming\nhere my name is Terrence Eaton I need to'
sub[3].text
'tell you three things about this talk so\nthe first thing is that this does'

But are we sure that will work for all the subtitles? Or even for the entirety of this subtitle file?

Python the hard way

Let's take a look again at the first 4 subtitle entries.

vtt[0].text
' \nand now can we have a round of applause'
vtt[1].text
'and now can we have a round of applause\n '
vtt[2].text
'and now can we have a round of applause\nfor Terrence Edwards and his talk the'
vtt[3].text
'for Terrence Edwards and his talk the\n '
vtt[4].text
'for Terrence Edwards and his talk the\nconnected house of horrors good'

We can split those double lines using

vtt[2].text.splitlines()
['and now can we have a round of applause', 'for Terrence Edwards and his talk the']

Let's create a new array. Add all the lines split by \n.

lines = []
for line in vtt:
    lines.extend(line.text.strip().splitlines())

Which gives us:

>>> lines[0]
'and now can we have a round of applause'
>>> lines[1]
'and now can we have a round of applause'
>>> lines[2]
'and now can we have a round of applause'
>>> lines[3]
'for Terrence Edwards and his talk the'
>>> lines[4]
'for Terrence Edwards and his talk the'
>>> lines[5]
'for Terrence Edwards and his talk the'
>>> lines[6]
'connected house of horrors good'

And now, to de-duplicate them:

transcript = ""
previous = None
for line in lines:
    if line == previous:
       continue
    transcript += " " + line
    previous = line

Putting it all together

Ta-da!

import webvtt
vtt = webvtt.read('subtitles.vtt')
transcript = ""

lines = []
for line in vtt:
    lines.extend(line.text.strip().splitlines())

previous = None
for line in lines:
    if line == previous:
       continue
    transcript += " " + line
    previous = line

print(transcript)

One thing to note is that there is no punctuation. So it's not as good as a proper transcription.

MPEG-DASH is a simple method of streaming videos which doesn't require any specialised server software. You convert a high resolution video into a series of smaller resolution videos. You chop each of the videos up into several chunks. As the video plays, your browser then decides which chunk of the video to load next depend on the bandwidth available to it. Easy!

Aim

From the command line:

• Upload a video to YouTube
• Download transcoded video in several formats suitable for MPEG DASH Streaming
• Generate DASH manifest
• Generate the HTML5 markup

Uploading

There are a couple of YouTube video uploaders. These are useful if you've got a video on a server, or don't want to waste a browser window.

• porjo/youtubeuploader has binaries available for Linux/Mac/Windows.
• tokland/shoogle a Python interface for all of Google's APIs.

I'm using Porjo's client. After following the authentication instructions, the output is something like:

./youtubeuploader_linux_amd64 -filename testing.mp4

Uploading file 'testing.mp4'...
Progress:     1.37 Mbps, 9852099 / 9852099 (100.000%) ETA          0s
Upload successful! Video ID: 6NV5heuaVuc

Downloading

The only program worth using is youtube-dl.

We can see every video format that YouTube has created using:

youtube-dl -F 6NV5heuaVuc

That will return something like:

It may take several minutes for YouTube to generate all the video formats - the length of time will depend on the length and quality of the video.

We want to download all the DASH videos and the DASH audios. We also want the subtitles - even if they are autogenerated. Finally, we want the thumbnail image for the HTML5 poster.

The youtube-dl command to download all the DASH audio is:

youtube-dl -f 'all[vcodec=none]' -o '%(title)s-%(format)s.%(ext)s' 6NV5heuaVuc

To get all the DASH videos:

youtube-dl -f 'all[acodec=none]' -o '%(title)s-%(format)s.%(ext)s' 6NV5heuaVuc

This will create a separate MP4 video for each resolution, and separate audio file for each bitrate.

To generate a single thumbnail, run:

youtube-dl --write-thumbnail --skip-download 6NV5heuaVuc

To download the subtitles:

youtube-dl --write-auto-sub --sub-format vtt --write-sub 6NV5heuaVuc

Convert to DASH

For this step, we need the open source Bento4 toolkit.

The video should already have "fragments" - the chunks which make up the stream - you can check this with:

./mp4info "Video-133 - 426x240 (DASH video).mp4"

In the output, you should see:

Movie:
  duration:   0 ms
  time scale: 90000
  fragments:  yes

The audio downloaded from YouTube will not have fragments, so you'll need to run this command on every audio file you've downloaded:

./mp4fragment "Video-140 - audio only (DASH audio).m4a" high.m4a

Combine and create manifest

Let's take those audio and video files and make ourselves a manifest!

./mp4dash -o output-video 133.mp4 135.mp4 136.mp4 137.mp4 160.mp4 high.m4a low.m4a

This creates the folder output-video and creates folders for the chunked audio and video.

It will also produce the MPD - a manifest file which references all of the chunks.

We're nearly ready to play back.

Play DASH Video in the browser

As far as I can tell, no browser natively supports MPEG-DASH. You will need to use the latest version of dash.js to make everything work smoothly.

Add this piece of JavaScript to your page:

<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>

Then reference the MPD in a video element:

<video width="1080" data-dashjs-player src="stream.mpd" controls poster="example.jpg">
    <track kind="subtitles" src="en.vtt" srclang="en" label="English">
</video>

Demo

Here is an adaptive stream of one of my videos - hosted natively on this site, with no server-side streaming.

Problems?

Fallback video

Some browsers can't play back DASH, even with the JavaScript - so you can put a fallback video in the HTML.

<video width="1080" data-dashjs-player controls >
    <source src="stream.mpd"   type="application/dash+xml">
    <source src="fallback.mp4" type="video/mp4">
</video>

HLS

Because Apple are special, they don't support DASH on its phones. So you'll need to use their proprietary HLS streaming solution. You can use Bento4 to create HLS in exactly the same way as you create DASH.

You may also need to use hls.js JavaScript to get things to work smoothly.

Subtitles

You can use DASH native subtitles, or HTML5 subtitles.

I found that the HTML5 subtitles downloaded by youtube-dl contain some strange CSS which didn't work well with the DASH video. You may need to test to see how it works for you.

All in one command?

Hahahaha! Not yet! If you know of a good way to do this - let me know!

So, here's a quick tutorial on how to download all your videos - and metadata - from YouTube.

The Official Way

Google offers a "takeout" service which will allow you to package up all your YouTube videos for export.

It creates a multi-gigabyte archive - which isn't particularly suitable for hosting elsewhere. Once the archive is created, you have to download it in 2GB chunks. The archives are only available for 7 days - so if you're on a normal speed Internet connection, you might not be able to grab everything.

If you do manage to download everything - you'll find another problem. The files are enormous because you're downloading the originals - not the web-optimised versions.

So, how can we download high-quality, low-filesize copies of the videos suitable for HTML5 use?

P-p-p-p-pick Up Some Python

We'll be using the excellent YouTube-DL - make sure you have the most recent version installed.

The Google Takeout from above contains a file called uploads.json - it has a list of every video you've uploaded and some associated metadata:

...
,{
  "contentDetails" : {
    "videoId" : "2gIM9MzfaC8"
  },
  "etag" : "\"mPrpS7Nrk6Ggi_P7VJ8-KsEOiIw/7fgl8GbhgRwxNU3aCz9jzUB_65M\"",
  "id" : "UUAEmywW2HASHP0MohSNIN0qHLpdeAxkQv",
  "kind" : "youtube#playlistItem",
  "snippet" : {
    "channelId" : "UCyC5lCspQ5sXZ9L3ZdEEF2Q",
    "channelTitle" : "Terence Eden",
    "description" : "Look at me walk to work!",
    "playlistId" : "UUyC5lCspQ5sXZ9L3ZdEEF2Q",
    "position" : 168,
    "publishedAt" : "2010-12-02T10:03:15.000Z",
    "resourceId" : {
      "kind" : "youtube#video",
      "videoId" : "2gIM9MzfaC8"
    },
    "thumbnails" : {
      "default" : {
        "height" : 90,
        "url" : "https://i.ytimg.com/vi/2gIM9MzfaC8/default.jpg",
        "width" : 120
      },
      "high" : {
        "height" : 360,
        "url" : "https://i.ytimg.com/vi/2gIM9MzfaC8/hqdefault.jpg",
        "width" : 480
      },
      "medium" : {
        "height" : 180,
        "url" : "https://i.ytimg.com/vi/2gIM9MzfaC8/mqdefault.jpg",
        "width" : 320
      }
    },
    "title" : "Walking To Work In The Snow"
  },
  "status" : {
    "privacyStatus" : "public"
  }
}, {
...

So, we want to go through that JSON, download some web-friendly versions of the media, and save them.

This Python downloads a high resolution MP4 video and AAC audio - it then mixes them together. It will also download a slightly lower resolution WEBM file. It then grabs a screenshot and any subtitles which are present. Finally, a little HTML5 snippet is written.

from __future__ import unicode_literals
from datetime import datetime

import youtube_dl
import json
import urllib
import os

#    Read the JSON
with open('uploads.json') as data_file:
    data = json.load(data_file)

#    Itterate through the JSON
for video in data:
    videoId     = video["contentDetails"]["videoId"]
    description = video["snippet"]["description"]
    publishedAt = video["snippet"]["publishedAt"]
    title       = video["snippet"]["title"]
    status      = video["status"]["privacyStatus"]

    #    Create a date object based on the video's timestamp
    date_object = datetime.strptime(publishedAt,"%Y-%m-%dT%H:%M:%S.000Z")

    #    Create a filepath and filename
    #    /YYYYMMDD-HHMM/YYYYMMDD-HHMM_My Video_abc123
    filepath    = date_object.strftime('%Y%m%d-%H%M')
    filename    = date_object.strftime('%Y%m%d') + "_" + title + "_" + videoId

    #    YouTube Options
    ydl_opts = {
        #    The highest quality MP4 should have the best resolution.
        #    Best quality AAC audio - because that's the codec which will fit in an MP4
        #    A lower quality WEBM for HTML5 streaming
        'format': 'bestvideo[ext=mp4]+bestaudio[acodec=aac],webm',
        'audioformat' :'aac',
        'merge_output_format' : 'mp4',
        #    Don't create multiple copies of things
        'nooverwrites' : 'true',
        #    Some videos have subtitles
        'writeautomaticsub' : 'true',
        'writethumbnail' : 'true',
        #    Make sure the filenames don't contain weird characters
        'restrictfilenames' : 'true',
        #    Add the correct extention for each filename
        'outtmpl' : filepath + '/' + filename + '.%(ext)s',
        #    If there is a problem, try again
        'retries' : '5',
        # 'verbose' : 'true',
    }

    #    Download the files
    with youtube_dl.YoutubeDL(ydl_opts) as ydl:
        if status == "private":
            #    YouTube-DL won't download private videos
            print "Skipping private video " + videoId
        else:
            print "Downloading " + videoId + " to " + filename
            ydl.download(['http://www.youtube.com/watch?v='+videoId])
            #    Write an HTML5 snippet
            html  = "<video   poster=\""+filename+".jpg\" controls >\n"
            html += "    <source src=\""+filename+".mp4\"    type=\"video/mp4; codecs=mp4a.40.2, avc1.42001E\">\n"
            html += "    <source src=\""+filename+".webm\"   type=\"video/webm; codecs=vorbis, vp8.0\">\n"
            html += "    <track  src=\""+filename+".en.vtt\" kind=\"subtitles\" srclang=\"en\" label=\"English\">\n"
            html += "</video>"
            #    Write the HTML
            with open(os.path.join(filepath, "video.html"), 'w') as html_file:
                html_file.write(html)

The files it downloads are significantly smaller than the original uploads - with no noticeable loss of quality. The combined size of the MP4 and WEBM are around half the size of the original files.

There is one major bug - occasionally the script will crap out with:

youtube_dl.utils.DownloadError: ERROR: content too short (expected 153471376 bytes and served 88079712)

This is a persistent error with YouTube-DL.

The script can be run again - it's smart enough to avoid re-downloading the videos.

And there you have it - a quick way to grab everything you've uploaded. It's missing a few things - view counts and comments, mostly - but it's good enough for re-hosting elsewhere.

This is what it looks like

This is what happens when you put that dash of HTML into a web-page:

I think there's a problem with the subtitle track - but it is not a finalised standard yet.

By which I mean - how do you make your content serve the user's time-bound constraints?

What I'm trying to say is - serendipitous discovery must be restricted based on temporal imperatives.

Or, to break it down further, a user may only have a specific amount of time to dedicate to your app; how do you deal with that?

In a mobile game, the interface may present the user a choice of "Quick Play" for when the user is waiting for a bus, "Medium Play" for when the user is on the bus, "Long Play" for when the user is stuck in a traffic jam.

James Whatley blogged about this subject recently. In a mobile video app - such as the BBC iPlayer - the length of time the user can spend on the app is (probably) more important than any other discovery method.

Demo

So, I spent the weekend building a demonstration mobile service which starts with the amount of time a user is expecting to use the app.

LooTube!

As far as I could see, iPlayer doesn't have any public APIs, the videos don't work on all phones, and the content isn't available outside the UK. So I have used YouTube as the basis.

The "User Story"?

As a user, when I am sat on the toilet, I want to be able to view a range of interesting videos suitable to the length of my visit.

Point your phone at http://LooTu.be and this is what you'll see:

YouTube's API only gives us three lengths of video - short, medium, and long - so there's not quite as much granularity as I would have liked.

Clicking one of the buttons, retrieves a list of videos based on time. The "Quick" button will show the users videos which are less than 4 minutes long.

At the moment, http://LooTu.be doesn't allow the user to search for anything. It only takes time as a search query. It does, however, randomly select between YouTubes standard "top" feeds - most viewed, top rated, most shared, top favourites, etc.

Technical Details

You can view the source of LooTu.be - it's fairly basic HTML5 and jQuery Mobile. Feel free to laugh at my code and offer suggestions.

Thanks

Big thanks to Whatley for the inspiration, Robbie Dale for the logo, and my wife for her patience this weekend!

I have reached a settlement with Sky.

Update: 16 March, 2011. They have finally paid up!

tl;dr

Sky News stole my copyrighted work and distributed it without credit or payment.

I asked them to pay £1,500.

They refused.

Full Story

During the recent O2 brouhaha I recorded a video showing how the issue could affect people. I deliberately gave it the standard YouTube licence rather than the Creative Commons licence.

Later that evening, I was alerted to the fact that Sky News had broadcast my video without first seeking permission.

Graham Cluley

@gcluley

Just did Sky News spot about the @O2 controversy. From sound of what came down my earpiece they also used @edent's vid youtube.com/watch?v=67b4GT…None

---

I grumbled a bit on Twitter and was contacted by a representative of Sky News. He was very quick in ascertaining that my video was used without my permission and arranged to prevent it being shown again.

I was not happy about this state of affairs. BSkyB and News International have been very vocal about digital piracy and copyright infringement. They have relentlessly pursued a copyright maximalist agenda which - I believe - is damaging to the creative industries. Not to mention rampantly hypocritical.

Sky News accept user generated videos, with this stern warning:

Copyright protects the interests of the people and companies who create these products. If the content or product or marks in your video are owned by someone else, you are infringing copyright and run the risk being prosecuted.

It is important that you understand that you cannot take other people's creations and use them as you see fit.

Uploading somebody else's video is no different to taking something from a shop without paying. Copyright infringement damages the music, film and television businesses and the future development of music, film and TV programmes.

From Sky News' Frequently Asked Questions about user videos. Emphasis added.

Sky News have a history of ignoring copyright and infringing the moral rights of authors.

Unfortunately, the Digital Economy Act doesn't allow me to sue Sky News for distributing my content for free without my permission. An individual can lose their Internet access for sharing a movie, however there don't seem to be any sanctions against a large company for sharing my copyrighted work without permission.

I don't have the resources to fight a legal battle against Sky. So I decided to settle for cold, hard cash.

Originally, Sky made the following offer:

For a short youtube video like that we would normally pay around £50 & would be more than willing to pay an extra £25 for the fact you weren't asked in the inconvenience it has caused you.

The NUJ publish a freelance rate card. The rate for freelance video should be around £300 per minute.

I farted in Sky's general direction. I wanted £300 for the broadcast of the video, plus £1,200. I calculated that as £400 for them failing to ask permission, another £400 for them infringing my copyright, and then £400 for them violating my moral rights.

Even if they didn't agree with the above reasoning, it is usual to charge four times time standard licence rate when a copyright owner is asked to assign all rights away. Effectively, Sky News had unilaterally assigned all my rights to them - so I felt justified asking for this sum.

Overall, I thought £1,500 was reasonable - especially when you consider that the Daily Mail paid £2,000 for using photographs without permission.

Sky came back with an offer of £300.

I pointed out that s107 of the Copyright, Designs and Patents Act 1988 had provisions for fines of up to £50,000, or a six month prison sentence. In comparison £1,500 seems modest.

Sky replied:

As I indicated, we do not yet agree on a sensible figure for this use.

Bearing in mind you are now invoking the Copyright Designs and Patents Act I have placed this matter in the hands of our lawyers.

This does not represent an unwillingness to come to an agreement between us but, unfortunately, it is likely to slow the progress slightly.

Now I'm waiting to hear back from their lawyers. I wonder what their hourly rate is?

I'll update this post when I know more...

A Settlement🔗

I have accepted an offer of £300. A few minutes ago, I received this email from Sky:

After consulting with our Sky lawyers our position is that we believe a £300 settlement is a fair and appropriate sum. Our position is:

• The £300 is in respect of what you describes as "infringement of copyright" rather than any "union rate";
• Contrary to what you claim, we did not act as if you had assigned us all rights. Specifically, we did not claim ownership nor seek to profit from it by licensing to others;
• Criminal liability will not attach in relation to an inadvertent use of footage;
• English law does not recognise violation of moral rights;
• There is no authority that an infringement in these circumstances attracts four times the usual licence fee. To the contrary, the usual measure is what the reasonable cost of licensing would have been.
• Our offer is generous for the reasons above and we will not increase it.

May I also stress that when you are relating this issue to third parties on whatever platform I would consider it unfair if you did not relay the fact that we immediately acknowledged your copyright and sought to bring redress. I stress, once again, that we take copyright and its infringement very seriously at Sky News.

I'm not a copyright lawyer, so am in no position to argue against their formidable legal might. I have invoiced them for £300. I must point out that - once I contacted them - Sky were very quick to take down the infringing content and have been unfailingly polite in their dealings with me.

I will be donating £100 to both The Open Rights Group and MySociety. And drinking the rest.

Thank you for all your comments, tweets, and messages of support.

Footnote

I'm currently on holiday - so comment moderation and updates may be delayed.

Easy A is new film aimed squarely a the youth market.  Perfect fodder for mobile advertising.

Cute little advert, doesn't say what it will link to, but other than that, not bad.  So let's click through and see what happens. Sweet! YouTube has an excellent mobile optimised site.  The ability to share the video on Facebook and Twitter is sure to make this baby go viral. Right? Right?

As the kids say, WTF?

Sony Pictures have deliberately disabled mobile playing for their video.  As far as I can tell, for all their videos.

All is not lost, though.  Helpfully, someone has been very naughty and illegally uploaded the video for us all to enjoy.

Lessons Learned

• Always test your advert - especially on the platforms for which they're intended.
• If you're a major movie studio and you don't want your content pirated - make it easily available.

The code is fairly simple - although I still suck at regular expressions.

if (preg_match_all('#youtube.com/watch?v=([_-dw]+)#', $tmp, $matches, PREG_PATTERN_ORDER) > 0)
 {
  foreach ($matches[1] as $match)
  {
  $images[] = theme('external_link', "http://m.youtube.com/watch?v={$match}", "<img src='http://i.ytimg.com/vi/{$match}/1.jpg' class='twitpic' />");
  }
 }

Here's how it looks.  A user writes a tweet which contains a YouTube URL

A thumbnail embedded in a tweet

The thumbnail is displayed and hyperlinked to the mobile version of YouTube

Pointing to Mobile YouTube

When clicked on, the user is taken straight to the video's page.

The Destination

There were three main issues with this code

1. How do we extract the video's ID from the URL? YouTube video IDs contain alphanumeric character and the - and _ characters. They can also have other parameters passed.  There can also be text after the URL.  The regular expression above takes care of them.
2. How do we get the thumbnail?  Previously, I had been using the image URL given in the m.YouTube page - something like http://i.ytimg.com/vi/plvE4882B7Y/default.jpg?w=80&h=60 - however those URLs now need signing. So, using the YouTube API, I took a look at the Video Information XML file - http://gdata.youtube.com/feeds/api/videos/plvE4882B7Y - it showed that all videos have a full sized thumbnail - http://i.ytimg.com/vi/plvE4882B7Y/0.jpg and a mobile friendly thumbnail - http://i.ytimg.com/vi/plvE4882B7Y/1.jpg
3. How do we link to the mobile version of YouTube?  There are two ways to do this - either allow YouTube to detect the User-Agent and redirect based on that, or simply point to the mobile version.  While a regular YouTube link looks like http://www.youtube.com/watch?v=plvE4882B7Y the mobile one simply substitutes www for m : http://m.youtube.com/watch?v=plvE4882B7Y

TODO

For phones which support playing YouTube videos inline (Android, some Nokias etc) I may actually embed the video, rather than just link to it.  I may also detect Desktop Browsers and send them to the regular version of YouTube.

Browsing http://m.youtube.com/ at the bottom is a new link

A link to a QR code

Clicking on it takes you to a QR code

The QR code

It's using the Google Chart API to generate the code.

The Googe Chart API in use

Will this spur QR codes into the mainstream? I hope so!

This scrap of code is a WordPress Plugin. it allows me to write something like [youtube id="p5ACl4iBGd0"]

The code then outputs either the XHTML 1.0 embeding code or the XHML-MP code which links to the mobile version of the site

function youtube_func($attr)
 {
 //Get the name of the Wordpress Template being used
 $name = get_template();

 //If this *isn't* a mobile theme
 if(stristr($name, 'mobile') === FALSE)
 {
 //Link to embeded YouTube video source
 $ytURL = "http://www.youtube.com/v/" . $attr['id'];

 //XHTML 1.0 Strict way of embeding movies
 $s = "<object type="application/x-shockwave-flash" style="width:450px; height:366px;" data="" . $ytURL . "">"
 . "<param name="movie" value="". $ytURL . "" />"
 . "</object>";

 return $s;

 }
 else //This is a mobile theme
 {
 //Link to mobile YouTube
 $mYtURL = "http://m.youtube.com/watch?v=" . $attr['id'];
 //Image of the video
 $mYtIMG = "http://i.ytimg.com/vi/" . $attr['id'] . "/default.jpg?w=128&amp;h=96";

 $s = "<a href="" . $mYtURL . "">"
 . "<img src="" . $mYtIMG . "" />"
 . "</a>";

 return $s;
 }
 }
 add_shortcode('youtube', 'youtube_func');

Many thanks to the Wordpress API, this excellent Wordpress Plugin Tutorial, and this Valid XHTML YouTube embed code generator.

You can download the plugin from WordPress.