<!doctype html>
<html>
  <head>
    <title>&lt;!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 &lt;audio /> and &lt;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 &lt;video /> for 3 years \nPan.do/ra: Future software development toward open media archives."
  },
  {
    "title": "!this",
    "text": "&lt;audio /> \nWebGL and other cool 3d multimedia stuff"
  },

  {
    "title": 'What is &lt;video /> and why?',
    "text": 'Increase of multimedia online.\nLike &lt;img />, the need for plain HTML to describe audio and video content. \n&lt;embed />, &lt;object /> and flash kill kittens.'
  },
  {
    "title": 'Basic usage',
    "iframe": 'basicvideo.html'
  },
  {
    "title": "You can just use CSS...",
    "iframe": 'videocss.html'
  },
  {
    "title": "And &lt;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 &lt;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">&lt;</div>
  </body>

</html>