rymai/gist:921421

## gistfile1.html
<!-- Inside the <head> tag -->
<script type="text/javascript" src="http://cdn.sublimevideo.net/js/YOUR_TOKEN.js"></script>

<!-- Inside the <body> tag -->
<img class="needs_sublime" src="video1.jpg" width="640" height="360" />

<!-- Just before </body> (or in the <head> tag) -->
<script type="text/javascript">
sublimevideo.load(); // When this page is first loaded there are no <video> element on the page, so SublimeVideo is not loaded unless we load it manually with this method
                     // see: http://docs.sublimevideo.net/javascript-api#load

sublimevideo.ready(function(){ // see: http://docs.sublimevideo.net/javascript-api#ready
  $("img.needs_sublime").each(function(index, imgEl){
    $(imgEl).bind("mousedown", function(event){ // IMPORTANT to do this onmousedown (and not onclick!)
      event.preventDefault();
      createVideoElementAndPrepareAndPlaySublimeVideo(imgEl);
    });
  });
});

function createVideoElementAndPrepareAndPlaySublimeVideo(imgEl) {
  var pathToPoster = imgEl.src; // we get your MP4 video path from the href attribute of the <a> element
  var pathToVideo  = pathToPoster.replace(/thumbs\/(\w+).jpg/, "/videos/$1")

  // Create the <video> element
  var video = $('<video>').attr({
    style: 'display:none',
    width: imgEl.width,
    height: imgEl.height,
    poster: pathToPoster,
    preload: 'none'
  });

  // Create the <source>s element and append them to the <video> element
  // You will need to have well-named posterframe and video files
  $('<source/>', { src:pathToVideo+".mp4" }).appendTo(video);
  $('<source/>', { src:pathToVideo+"-mobile.mp4" }).appendTo(video);
  $('<source/>', { src:pathToVideo+".ogv" }).appendTo(video);

  // Insert <video> element after the <a> element
  $(imgEl).hide();
  $(imgEl).after(video);

  // SublimeVideo prepare
  $(imgEl).addClass('sublime').removeClass('needs_sublime');
  sublimevideo.prepareAndPlay(video[0]); // see: http://docs.sublimevideo.net/javascript-api#prepareAndPlay
}
</script>
	<!-- Inside the <head> tag -->
	<script type="text/javascript" src="http://cdn.sublimevideo.net/js/YOUR_TOKEN.js"></script>

	<!-- Inside the <body> tag -->
	<img class="needs_sublime" src="video1.jpg" width="640" height="360" />

	<!-- Just before </body> (or in the <head> tag) -->
	<script type="text/javascript">
	sublimevideo.load(); // When this page is first loaded there are no <video> element on the page, so SublimeVideo is not loaded unless we load it manually with this method
	// see: http://docs.sublimevideo.net/javascript-api#load

	sublimevideo.ready(function(){ // see: http://docs.sublimevideo.net/javascript-api#ready
	$("img.needs_sublime").each(function(index, imgEl){
	$(imgEl).bind("mousedown", function(event){ // IMPORTANT to do this onmousedown (and not onclick!)
	event.preventDefault();
	createVideoElementAndPrepareAndPlaySublimeVideo(imgEl);
	});
	});
	});

	function createVideoElementAndPrepareAndPlaySublimeVideo(imgEl) {
	var pathToPoster = imgEl.src; // we get your MP4 video path from the href attribute of the <a> element
	var pathToVideo = pathToPoster.replace(/thumbs\/(\w+).jpg/, "/videos/$1")

	// Create the <video> element
	var video = $('<video>').attr({
	style: 'display:none',
	width: imgEl.width,
	height: imgEl.height,
	poster: pathToPoster,
	preload: 'none'
	});

	// Create the <source>s element and append them to the <video> element
	// You will need to have well-named posterframe and video files
	$('<source/>', { src:pathToVideo+".mp4" }).appendTo(video);
	$('<source/>', { src:pathToVideo+"-mobile.mp4" }).appendTo(video);
	$('<source/>', { src:pathToVideo+".ogv" }).appendTo(video);

	// Insert <video> element after the <a> element
	$(imgEl).hide();
	$(imgEl).after(video);

	// SublimeVideo prepare
	$(imgEl).addClass('sublime').removeClass('needs_sublime');
	sublimevideo.prepareAndPlay(video[0]); // see: http://docs.sublimevideo.net/javascript-api#prepareAndPlay
	}
	</script>