290 lines
9.1 KiB
HTML
290 lines
9.1 KiB
HTML
<!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: 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': 'http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml'
|
|
},
|
|
{
|
|
"title": "You begin to get the idea...",
|
|
'iframe': 'http://html5doctor.com/demos/video-canvas-magic/demo1.html'
|
|
},
|
|
{
|
|
"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": "<b>Ogg Theora</b>: non-patent encumbered, developed by On2 and maintained by the Xiph Foundation, works with Firefox, Chrome, Opera \n<b>H.264</b>: patent-encumbered, license managed by the MPEG-LA consortium, works with IE9 and flash, supports hardware acceleration on certain devices \n<b>WebM</b>: 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": "Pan.do/ra in development",
|
|
"iframe": "http://dev.pan.do"
|
|
},
|
|
{
|
|
"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>
|