251 lines
6.8 KiB
HTML
251 lines
6.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<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": "Pad.ma: Public Access Digital Media Archive",
|
||
|
|
"text": "is a text annotated video archive \nBegun in early 2008\n Collaboration between various 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": "http://dev.pan.do"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"title": "We hope someday, you'll join us.. http://wiki.0x2620.org",
|
||
|
|
"iframe": http://wiki.0x2620.org/pandora
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
$(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>
|