mathieu-aubin/play.html

## play.html
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,minimum-scale=1.0"/>
  <title></title>
</head>
<body>
    <style type="text/css">
    video {
        max-width: 100%;
    }
    </style>
    <script type="text/javascript">
    var html = '' +
        '<video controls width="600" height="320">' +
            '<source src="{video}" type=\'{type}\' />' +
            '<div>Sorry your browser does not support this video</div>' +
        '</video>';
    var m = location.search.match(/[a-zA-Z0-9]+=[^&]+/g);
    var split;
    for (var i = 0,l = m.length; i < l; i++) {
        split = m[i].split('=');
        html = html.replace('{' + split[0] + '}', decodeURIComponent(split[1]));
    }
    document.write(html);
    </script>
</body>
</html>

## video.js
<script type="text/javascript">
    (function() {
	    var data = {
		    htmlUrl: './play.html',
		    videoUrl: './video.mp4',
		    type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
	    };
	    var img = document.getElementById('canvas');
	    var parent = img.parentNode;
	    var video = document.createElement('video');
	    if (video.canPlayType(data.type)) {
		    // create video
		    var source = document.createElement('source');
		    source.src = data.videoUrl;
		    source.type = data.type;
		    video.appendChild(source);
		    // create time span
		    var span = document.createElement('span');
		    span.innerHTML = '00:30';
		    // create link image
		    var a = document.createElement('a');
		    a.href = data.htmlUrl + '?video=' + encodeURIComponent(data.videoUrl) + '&type=' + encodeURIComponent(data.type);
		    a.target = '_blank';
		    parent.removeChild(img);
		    a.appendChild(img);
		    parent.appendChild(video);
		    parent.appendChild(a);
		    parent.appendChild(span);
	    }
    })();
</script>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,minimum-scale=1.0"/>
	<title></title>
	</head>
	<body>
	<style type="text/css">
	video {
	max-width: 100%;
	}
	</style>
	<script type="text/javascript">
	var html = '' +
	'<video controls width="600" height="320">' +
	'<source src="{video}" type=\'{type}\' />' +
	'<div>Sorry your browser does not support this video</div>' +
	'</video>';
	var m = location.search.match(/[a-zA-Z0-9]+=[^&]+/g);
	var split;
	for (var i = 0,l = m.length; i < l; i++) {
	split = m[i].split('=');
	html = html.replace('{' + split[0] + '}', decodeURIComponent(split[1]));
	}
	document.write(html);
	</script>
	</body>
	</html>
	<script type="text/javascript">
	(function() {
	var data = {
	htmlUrl: './play.html',
	videoUrl: './video.mp4',
	type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
	};
	var img = document.getElementById('canvas');
	var parent = img.parentNode;
	var video = document.createElement('video');
	if (video.canPlayType(data.type)) {
	// create video
	var source = document.createElement('source');
	source.src = data.videoUrl;
	source.type = data.type;
	video.appendChild(source);
	// create time span
	var span = document.createElement('span');
	span.innerHTML = '00:30';
	// create link image
	var a = document.createElement('a');
	a.href = data.htmlUrl + '?video=' + encodeURIComponent(data.videoUrl) + '&type=' + encodeURIComponent(data.type);
	a.target = '_blank';
	parent.removeChild(img);
	a.appendChild(img);
	parent.appendChild(video);
	parent.appendChild(a);
	parent.appendChild(span);
	}
	})();
	</script>