Video from URL Preview

video-preview.js

/*

 * Requires : underscore.js
	uploader = file[type=text]
	output =  output element
	E.G
	uploader = document.getElementById("file_url"),
	output = document.getElementById('preview_image'),

	valid :
	vimeo
	http://vimeo.com/44920975'
	<iframe src="http://player.vimeo.com/video/6924410" width="500" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/6924410">Testing</a> from <a href="http://vimeo.com/user2410627">stuart grant</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
	<iframe src="http://player.vimeo.com/video/VIDEO_ID" width="WIDTH" height="HEIGHT" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
	youtube
	https://www.youtube.com/watch?v=_QtoHqZPkk0
	http://youtu.be/_QtoHqZPkk0
	http://www.youtube.com/watch?v=DksSPZTZES0
	<iframe width="560" height="315" src="http://www.youtube.com/embed/_QtoHqZPkk0" frameborder="0" allowfullscreen></iframe>
	<iframe width="560" height="315" src="http://www.youtube.com/embed/_QtoHqZPkk0?xys=asdasdadas&asda=123" frameborder="0" allowfullscreen></iframe>

	invalid :
	anything other than vimeo & youtube
	"  youtube.com"
	<object width="450" height="370"><param name="movie" value="http://www.liveleak.com/e/5d6_118580...</param><param name="wmode" value="transparent"></param><embed src="http://www.liveleak.com/e/5d6_1185807321" type="application/x-shockwave-flash" wmode="transparent" width="450" height="370"></embed></object>

*/



var videoPreview  = function (el) {

	var previewRequest,
		acceptedProviders = ['youtube','vimeo'],
		awesomeIDs = ['dQw4w9WgXcQ'],
		acceptedURLs = ['www.youtube.com','youtube.com','youtu.be', 'www.vimeo.com','vimeo.com', 'player.vimeo.com'],
		provderDimensions = {
			youtube : {
				w : 560,
				h : 315
			},
			vimeo : {
				w : 500,
				h : 375
			}
		},

	initialise = function () {
		input = el.querySelector('[data-videoPreview-input]') || null,
		output = el.querySelector('[data-mediaPreview-output]') || document.body.querySelector('[data-mediaPreview-output]'),

		input.addEventListener('keyup', handleVideo);
		input.onpaste = handleVideo;

		if(input.value !== ''){
			handleVideo();
		}
	},

	handleVideo = function () {


		clearTimeout(previewRequest);

		previewRequest = setTimeout(function() {

			output.innerHTML = '';

			var url =  input.value,
				urlparts = getURLParts(url),
				provider = getVideoProvider(urlparts),
				video_id = getVideoID(urlparts);

				if(provider == 'unsupported') {
				// do something
				} else {
					buildVideoIframe(video_id,provider);
				}

		}, 400);

	},


	getURLParts = function(str) {

		var typecheck, rawurl, url, urlPart, urlparts, match;

		//remove whitespace start & end
		str = str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');

		typecheck = str.substring(0, 7);

		if ((typecheck == "<iframe") || (typecheck == "<object")) {
			rawurl = str.match(/src=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?/)[1];
		} else{
			rawurl = str;
		}

		urlparts = rawurl.split("/");

		return urlparts;
	},

	getVideoProvider = function(urlparts) {
		// check to see if we accept the domain

		var match = _.intersection(acceptedURLs,urlparts),
		provider;

		if (match.length < 1) {
			return 'unsupported';
		}

		// check to see if we accept provider
		if( match[0]  === "youtu.be") {
			provider = "youtube";
		} else {
			matched = match[0].split('.');
			provider =_.intersection(acceptedProviders,matched)[0];
		}

		return provider;

	},

	getVideoID = function(urlparts) {
		// fun jiggerypokery to get the 'v=' & 'watch?' sorted
		var video_id = urlparts.pop(),
		vid = video_id.split('v=')[1];

		if (vid !== undefined) {
			video_id = vid;
			var ampersandPosition = vid.indexOf('&');
			if(ampersandPosition != -1) {
				video_id = vid.substring(0, ampersandPosition);
			}
		}

		return video_id;

	},

	buildVideoIframe = function(id, provider){
		var
		name = 'preview_'+provider+'_'+id,
		src,
		iframe = document.createElement('iframe'),
		autoplay;

		if(awesomeIDs.indexOf(id) >= 0) {
			autoplay = 'autoplay=1';
		}

		if( provider === 'youtube'){
			src = 'http://www.youtube.com/embed/' + id+ '?' + autoplay;
		} else if( provider === 'vimeo') {
			src = 'http://player.vimeo.com/video/' + id;
			iframe.setAttribute('webkitAllowFullScreen', '');
			iframe.setAttribute('mozallowfullscreen', '');
		} else {
			src = 'unsupported video format';
		}

		iframe.name = name;
		iframe.id = name;
		iframe.src = src;
		if( !output.hasAttribute('data-bookmarklet') ) {
			iframe.height = provderDimensions[provider].h;
			iframe.width = provderDimensions[provider].w;
		}
		iframe.frameborder = 0;
		iframe.setAttribute('allowFullScreen', '');

		output.innerHTML = "";
		output.appendChild(iframe);
	};

	initialise();


};