<!doctype html>
<html>
<head>
<title><!DOCTYPE html></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var currentSlide = 0;
var allSlides =
[
{
"title": '/whois',
"text": 'Sanjay Bhangar. \nWorks at CAMP (http://camputer.org)\n Involved with the Pad.ma Project for 3 years.'
},
{
"title": "this (structure of presentation)",
"text": "Introduction to <audio /> and <video /> in HTML. \nBasic usage and examples of cool stuff. \nCodec Wars: Browser Wars in the 21st Century. \nRelated standards - timed text and media fragment URIs \nPad.ma: running a site using html <video /> for 3 years \nPan.do/ra: Future software development toward open media archives."
},
{
"title": "!this",
"text": "<audio /> \nWebGL and other cool 3d multimedia stuff"
},
{
"title": 'What is <video /> and why?',
"text": 'Increase of multimedia online.\nLike <img />, the need for plain HTML to describe audio and video content. \n<embed />, <object /> and flash kill kittens.'
},
{
"title": 'Basic usage',
"iframe": 'basicvideo.html'
},
{
"title": "You can just use CSS...",
"iframe": 'videocss.html'
},
{
"title": "And <canvas /> if you like...",
"iframe": "videocanvas.html"
},
{
"title": "You begin to get the idea...",
'iframe': 'http://hacks.mozilla.com'
},
{
"title": "Give me my Javascript",
"text": "Full Javascript API to interact with Video object. \n.currentTime to get and set current time-code \nCallbacks functions: onloadedmetadata, onplay, onpause, onended, etc. \nOf course, also behaves like a standard DOM element and responds to onclick, onmouseover, etc."
},
{
"title": "Codec wars",
"text": "Ogg Theora: non-patent encumbered, developed by On2 and maintained by the Xiph Foundation, works with Firefox, Chrome, Opera \nH.264: patent-encumbered, license managed by the MPEG-LA consortium, works with IE9 and flash, supports hardware acceleration on certain devices \nWebM: vp8 codec developed by On2, bought and open-sourced by Google last year, works on Chrome, Firefox 4+. Broad support promised, include hardware acceleration support, and support in Flash."
},
{
"title": "So what the hell should you do?",
"text": "Option 1: Encode all your video to two separate formats \nOption 2: Use fallbacks / plugins for browsers that don't support the codec you use \nOption 3: Ask browser vendors to support free codecs and don't support their browser until they do \nI have absolutely no clue"
},
{
"title": "Related Standards",
"text": "Timed-Text \nMedia Fragment URIs"
},
{
"title": "Timed-text tracks to video",
"text": "The need for a standard for caption / subtitle / annotation tracks \nHelping with search \nHelping with accessibility \nFormat wars once again - TTML, SRT, and finally WebVTT \nUsage: the <track /> element"
},
{
"title": "WebVTT: A work in progress",
"iframe": "http://www.whatwg.org/specs/web-apps/current-work/webvtt.html"
},
{
"title": "Media Fragment URIs",
"text": "Ability to send someone a link to either a temporal or spatial segment within a video \nStandardized format for URLs \nNo clear idea of spatial URIs or how browsers should render them \nStandard for temporal URIs close to finalized \nhttp://coolvideosite.com/video.ogg#t=10:00 \nURL is processed by the browser and seeking is done client-side via HTTP Range requests."
},
{
"title": "The Media Fragments Working Group",
"iframe": "http://www.w3.org/2008/WebVideo/Fragments/"
},
{
"title": "Shameless Plugging",
"text": "Pad.ma and pan.do/ra"
},
{
"title": "Pad.ma: Public Access Digital Media Archive",
"text": "is a text annotated video archive \nBegun in early 2008\n Collaboration between various non-profit groups in India and 0x2620.org from Berlin \nVideo material is released under the PGPL (Padma General Public License) \nCode is all released under the GPL :)"
},
{
"title": "Software Features",
"text": "One of the first websites to use the HTML video tag \nTime-code accurate full text search within video. \nAbility to send URLs to a segment of video \nAbility to download segment of video \nUpload and download SRT files of text annotation \nUses BitTorrent for full downloads \nClient-side video encoding and chunk uploading \nMouse-over video flipbook, colour timelines, etc."
},
{
"title": "Video Material",
"text": "Working with documentary film-makers from across India \n Majlis - Bombay Documentation and more\n CAMP: Projects documentation / using the archive \n ALF: Film studies, etc. \n Interviews / talking heads \n Dance archives \n Random stuff"
},
{
"title": 'http://pad.ma',
"iframe": 'http://pad.ma'
},
{
"title": "Future Development: pan.do/ra",
"text": "Building a configurable frame-work for online video archives \nSome new ideas \nJSON architecture \n Software libraries - OxJS, python-ox"
},
{
"title": "http://dev.pan.do",
"iframe": "Pan.do/ra in development.."
},
{
"title": "We hope someday, you'll join us.. http://wiki.0x2620.org",
"iframe": "http://wiki.0x2620.org/wiki/pandora"
},
{
"title": "checkout self - http://code.camputer.org/doctypehtml",
"iframe": "http://code.camputer.org/doctypehtml"
},
{
"title": "Thanks!",
"text": "Questions?"
}
]
$(document).ready(function() {
if (window.location.hash === "") {
showSlide(currentSlide);
} else {
currentSlide = parseInt(window.location.hash.replace("#", "")) - 1;
showSlide(currentSlide);
}
$('#nextBtn').click(function() {
currentSlide++;
showSlide(currentSlide);
});
$('#prevBtn').click(function() {
currentSlide--;
showSlide(currentSlide);
});
$(document).keyup(function(e) {
if (e.keyCode == 37) {
if ($('#prevBtn').is(":visible")) $('#prevBtn').click();
}
if (e.keyCode == 39) {
if ($('#nextBtn').is(":visible")) $('#nextBtn').click();
}
});
});
function showSlide(no) {
var slide = allSlides[no];
window.location.hash = "" + (no + 1);
var isIframe = slide.hasOwnProperty("iframe") ? true : false;
var $wrap = $('#wrapper');
$wrap.fadeOut("normal", function() {
$wrap.empty();
if (isIframe) {
var $title = $('<div />').addClass("iframeHeader").html(slide.title).data("pos", "top").appendTo($wrap);
var $iframe = $('<iframe />').addClass("iframe").attr("src", slide.iframe).appendTo($wrap);
} else {
var $title = $('<h1 />').addClass("slideHeader").html(slide.title).appendTo($wrap);
var points = slide.text.split("\n");
var $points = $('<ul />').addClass("slidePoints").appendTo($wrap);
for (var i=0; i<points.length; i++) {
var $point = $('<li />').addClass("slidePoint").html(points[i]).appendTo($points);
}
}
$wrap.fadeIn();
var $prev = $('#prevBtn');
var $next = $('#nextBtn');
if (no == 0) {
$prev.hide();
} else {
if (!$prev.is(":visible")) $prev.show();
}
if (no == (allSlides.length - 1)) {
$next.hide();
} else {
if (!$next.is(":visible")) $next.show();
}
});
}
$('.iframeHeader').live("dblclick", function() {
var $this = $(this);
// alert($this.data("pos"));
if ($this.data("pos") == "top") {
var windowHeight = $(window).height();
var thisHeight = $this.height();
var newTop = windowHeight - thisHeight;
$this.animate({'top': newTop + "px"});
$this.data("pos", "bottom");
} else {
$this.animate({'top': '0px'});
$this.data("pos", "top");
}
});
</script>
<style type="text/css">
.navBtn {
position: absolute;
color: #fff;
background: rgba(120,120,120, 0.7);
padding: 2px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-size: 8px;
font-weight: bold;
border: 1px solid #000;
cursor: pointer;
z-index: 100;
}
#nextBtn {
top: 2px;
right: 2px;
}
#prevBtn {
top: 2px;
left: 2px;
}
body {
background-image: -moz-linear-gradient(top, #ccc, #aaa, #333);
background-image: -webkit-gradient(radial, 45px 45px 45deg, circle cover,
#666 0%, #ccc 100%, #333 95%);
}
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#wrapper {
width: 100%;
height: 100%;
}
.iframeHeader {
width: 100%;
height: 26px;
padding-top: 2px;
padding-bottom: 2px;
position: absolute;
top: 0px;
font-size: 24px;
text-align: center;
font-weight: bold;
background: rgba(120,120,120,0.7);
z-index: 50;
}
.iframe {
position: absolute;
top: 0px;
left: 0px;
border: 0px;
width: 100%;
height: 100%;
}
.slideHeader {
width: 100%;
text-align: center;
font-size: 36;
margin-bottom: 36px;
}
.slidePoints {
width: 80%;
margin-left: auto;
margin-right: auto;
font-size: 24px;
}
.slidePoint {
margin-bottom: 18px;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
<div id="nextBtn" class="navBtn">></div>
<div id="prevBtn" class="navBtn"><</div>
</body>
</html>