Skip to content

Instantly share code, notes, and snippets.

@kaichen

kaichen/sample.html

Created July 1, 2011 06:58
Show Gist options
  • Save kaichen/1058011 to your computer and use it in GitHub Desktop.
Save kaichen/1058011 to your computer and use it in GitHub Desktop.
Download ZIP
html5 video sample w/ jquery.tmpl
Raw
sample.html
<!doctype html>
<html>
<head>
<title>Html5 video with jq.tmpl sample</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var other = {
mp4: "http://mediaelementjs.com/media/echo-hereweare.mp4",
ogg: "http://mediaelementjs.com/media/echo-hereweare.ogg",
webm: "http://mediaelementjs.com/media/echo-hereweare.webm"
};
$.template("mytemplate", $("#tmpl").text());
$("a#next_video").live('click', function () {
$("#video").empty();
$.tmpl("mytemplate", other).appendTo("#video");
return false;
});
});
</script>
</head>
<body>
<div id="video">
<video controls preload>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
<p><a href="javascript:;" id="next_video">Next video</a></p>
<script id="tmpl" type="text/x-jquery-tmpl">
<video controls preload>
<source src="${mp4}" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="${webm}" type='video/webm; codecs="vp8, vorbis"' />
<source src="${ogg}" type='video/ogg; codecs="theora, vorbis"' />
</video>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment