Home

GreaseMonkey: Link videos from Last.fm to YouTube

By Cristi - posted on May 7th, 2009 and tagged under

Last.fm has one small feature that I miss a lot: a direct link on the video page to the original YouTube page. Of course, this only applies to videos from YouTube, but I'm amazed they didn't introduce this yet (or maybe I'm just too blind to see it).

Any way, it's definitively not a blocker, but since I was playing with GreaseMonkey, I said why not try to fix this. From the technical point of view, the script is quite simple - just some basic Javascript DOM operations spiced with a magic regular expression.

First, let's see how we can obtain the YouTube video ID from a link. YouTube embedded video links have the following form: http://www.youtube.com/v/yCxb8FwhzK8&autoplay=1

The part in bold is actually the video title which we can extract with the following regular expression:

/**
 * Regular expression that extracts the video id from an embedded video link
 */
var videoIdFromLinkRegExp = /.*v\/([a-zA-Z0-9]+)/i;

The next step is to walk the DOM and lookup video ID values:

/**
 * Obtains the video ID from the current page.
 */
function getLastFMVideoId() {
	var videoParent = document.getElementById("playingVideo");
 
	if (videoParent) {
		var videos = videoParent.getElementsByTagName("embed");
 
		if (videos && videos.length > 0) {
			var matches = videoIdFromLinkRegExp.exec(videos[0].src);
 
			/* The id will be returned as the second value, if the
			 * regexp matched. 
			 */
			if (matches && matches.length > 0) {
				return matches[1];
			}
		}
	}
 
	return null;
}

Now we only need to build the link for the YouTube video page, which should be something like this: http://www.youtube.com/watch?v=videoId

Below you can see the full script, together with the part that inserts the video link in the current document.

// --------------------------------------------------------------------
// ==UserScript==
// @name          Last FM YouTube Link
// @author	  Cristian V.
// @namespace     http://irisquest.net/greasemonkey/LastFMYoutubeLink
// @description   Provides a link for a Last.fm video to the original YouTube page.
// @include       http://www.last.fm/*
// ==/UserScript==
 
/**
 * Regular expression that extracts the video id from an embedded video link
 */
var videoIdFromLinkRegExp = /.*v\/([a-zA-Z0-9]+)/i;
 
/**
 * Obtains the video ID from the current page.
 */
function getLastFMVideoId() {
	var videoParent = document.getElementById("playingVideo");
 
	if (videoParent) {
		var videos = videoParent.getElementsByTagName("embed");
 
		if (videos && videos.length > 0) {
			var matches = videoIdFromLinkRegExp.exec(videos[0].src);
 
			/* The id will be returned as the second value, if the
			 * regexp matched. 
			 */
			if (matches && matches.length > 0) {
				return matches[1];
			}
		}
	}
 
	return null;
}
 
/**
 * Creates a link for the specified YouTube video ID.
 */
function createLinkElement(videoId) {
	var parentDiv = document.createElement("div");
	parentDiv.innerHTML = 'You can also visit the <a href="http://www.youtube.com/watch?v=' + videoId + '">YouTube page for this video</a>.';
 
	return parentDiv;
}
 
/**
 * Alters the current page (if it's a video one) in order to place the link.
 */
function changePage() {
	var videoId = getLastFMVideoId();
 
	if (videoId) {
		var videoParent = document.getElementById("playingVideo");
 
		/* The link will be placed right before the first paragraph. */
		var firstParagraph = videoParent.getElementsByTagName("p")[0];
 
		videoParent.insertBefore(createLinkElement(videoId), firstParagraph);
	}
}
 
changePage();