<!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>