Commit a608474c authored by Michael Murtaugh's avatar Michael Murtaugh
Browse files

scrubber, in/out point, youtube

parent b645cdb5
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="744.09448819"
height="1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.48.2 r9819"
sodipodi:docname="controls.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="4"
inkscape:cx="63.418641"
inkscape:cy="992.9026"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
inkscape:window-width="1280"
inkscape:window-height="776"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
showborder="false">
<inkscape:grid
type="xygrid"
id="grid3792"
empspacing="5"
dotted="true"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#000000;fill-opacity:1;stroke:none"
id="rect2985"
width="32"
height="32"
x="-22"
y="-7.6378174" />
<rect
style="fill:#000000;fill-opacity:1;stroke:none"
id="rect2985-9"
width="42.426407"
height="42.426407"
x="79.452057"
y="-54.898224"
transform="matrix(0.7071068,0.70710677,-0.7071068,0.70710677,0,0)"
inkscape:export-filename="/home/murtaugh/public_html/aa.jquery.timeline/css/diamond32w.png"
inkscape:export-xdpi="48"
inkscape:export-ydpi="48" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 95,137.36218 30,0 0,-29.99999 z"
id="path3798"
inkscape:connector-curvature="0"
inkscape:export-filename="/home/murtaugh/public_html/aa.jquery.timeline/css/inpoint32.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
<path
style="fill:#000000;stroke:none;stroke-width:1.15470052000000001px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
d="m 25,37.362183 0,30 20,-15 z"
id="path3818"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 130,17.362183 30,30 0,-30 -30,0 z m 30,30 -30,30 30,0 0,-30 z"
id="rect3841"
inkscape:connector-curvature="0"
inkscape:export-filename="/home/murtaugh/public_html/aa.jquery.timeline/css/outpoint32w.png"
inkscape:export-xdpi="48"
inkscape:export-ydpi="48" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 45,77.362183 -30,29.999997 0,-29.999997 30,0 z m -30,29.999997 30,30 -30,0 0,-30 z"
id="rect3841-6"
inkscape:connector-curvature="0"
inkscape:export-filename="/home/murtaugh/public_html/aa.jquery.timeline/css/inpoint32w.png"
inkscape:export-xdpi="48"
inkscape:export-ydpi="48" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="744.09448819"
height="1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.48.2 r9819"
sodipodi:docname="New document 1">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.0182207"
inkscape:cx="166.76046"
inkscape:cy="1025.1113"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
inkscape:window-width="1280"
inkscape:window-height="776"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1">
<inkscape:grid
type="xygrid"
id="grid3755" />
</sodipodi:namedview>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:none;stroke:#000000;stroke-width:0.38760662;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="rect2985"
width="305"
height="20"
x="20"
y="12.362183" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 20,32.362183 0,10 -10,0 z"
id="path3773"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="m 325,32.362183 0,10 10,0 z"
id="path3773-4"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;fill-opacity:1;stroke:none"
d="M 127.07107,5.2911142 120,12.362183 112.92893,5.2911142 z"
id="path3773-9"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 120,12.362183 0,20"
id="path3811"
inkscape:connector-curvature="0" />
</g>
</svg>
css/square.png

193 Bytes

.scrubber {
height: 32px;
background: #AAA;
position: relative;
}
.scrubber.waiting {
background: #444;
}
.thumb {
position: absolute;
width: 32px; height: 32px;
top: 0; left: 0;
z-index: 2;
background-image: url('diamond32w.png');
}
.playing .thumb {
background-image: url('diamond32.png');
}
.inpoint {
position: absolute;
width: 32px; height: 32px;
background-image: url('inpoint32w.png');
top: 0; left: 0;
z-index: 1;
}
.outpoint {
position: absolute;
width: 32px; height: 32px;
background-image: url('outpoint32w.png');
top: 0; right: 0;
z-index: 1;
}
.scrubber .timing {
position: absolute;
left: 0;
top: 32px;
font-family: monospace;
padding-top: 2px;
font-size: 12px;
}
.scrubber .duration {
color: gray;
}
== 1 Feb 2012 ==
Things start to feel round. Writing the new scenarios to include past usage (annotation, playlist, and finally virtual timeline), realizing that a key part of the reorganization is to do "just in time" bindings of things (ie searching of elements, linking to a callback timeline structure). This to allow maximum dynamism and cancellability (allow structures to disappear immediately when no longer active in a play). In a way, going toward zero init code -- in principle, code kicks in with some call to play and avoid too much "presetting" / preflight.
Rearrived at:
Playable.play(from, to, onend=)
Considering (again) if timeline code makes sense here ("end detection" code is somewhat redundant)
...
Synchronous playback is hard -- and uninteresting!
>> Play Stack
====
Unify!
1. POC: jquery.playable for uniform playable elements (html5media/youtube/vimeo)
......
......@@ -52,7 +52,7 @@ $(document).ready(function () {
<ul>
<li>
<a href="playable.html">jquery.playable.js</a> : Abstraction wrapper to give a uniform interface around various media. Extendable. Includes html5 video, audio tags, YouTube, Virtual media (aka Void Player).
<a href="playable01.html">jquery.playable.js</a> : Abstraction wrapper to give a uniform interface around various media. Extendable. Includes html5 video, audio tags, YouTube, Virtual media (aka Void Player).
</li>
<li>
<a href="#timeline">jquery.timeline.js</a> : Allows time-based events related to a timed element (by default, "passive" in that it simply follows and is triggered by the element's timeupdate event)
......@@ -63,243 +63,18 @@ $(document).ready(function () {
<ul>
<li>
<a href="annotation.html">Video drives Annotation(s)</a>
<a href="annotation.html">Annotation (Video drives Timed Sections)</a>
</li>
<li>
<a href="annotation_driving.html">Annotation drives Video (& Annotations)</a>
<a href="playlist01.html">Playlist (Timed Sections drive Video)</a>
</li>
<li>
<a href="playlist.html">Multi-source Annotation</a>
</li>
<li>
<a href="virtual.html">Virtual Timeline</a>
<a href="virtual01.html">Virtual Timelines</a>
</li>
<li>
<a href="cascading.html">Cascading Timeline with Embedded Media</a>
</li>
</ul>
<h3>Generic Setup Code</h3>
<p>
The following code creates/ensures timeline elements and associates them with any referring HTML elements.
</p>
<script type="syntaxhighlighter" class="brush: js">
var timelines = {};
$("[mediagroup]").each(function() {
var timeline = timelines[$(this).attr("mediagroup")];
if (timeline === undefined) {
timeline = new Timeline();
timelines[$(this).attr("mediagroup")] = timeline;
}
timeline.add(this);
});
</script>
The timeline, on adding, searches within the added DOM element for timed (sub)elements, ie things with attributes data-begin and data-end.
<ul>
<li>Elements with a data-begin (and optionally data-end)</li>
</ul>
<h3>Hello world (trivial example)</h3>
<p>
Example of a single video connected to controller. By default, without other attributes, adding the mediagroup attribute has no apparent effect.
</p>
<script type="syntaxhighlighter" class="brush: html">
<video src="sadie-plant.ogg" controls mediagroup="sadie-plant"></video>
</script>
<h3>Using custom Javascript controls</h3>
<script type="syntaxhighlighter" class="brush: html">
<video src="sadie-plant.ogg" controls mediagroup="master"></video>
<div class="aacontrols" mediagroup="master" ></div>
</script>
... and Javascript to "activate" the scrubber:
<script type="syntaxhighlighter" class="brush: js">
$(document).ready(function () {
$(".aacontrols").aacontrols();
});
</script>
<h3>Video with an offset</h3>
<p>
In this case, a data-begin attribute introduces a 5 second delay, then the video plays (from start to end). (cf is begin == startOffsetTime? attribute of HTML5 Media Elements)
</p>
<script type="syntaxhighlighter" class="brush: html">
<video src="sadie-plant.ogg" controls mediagroup="sadie-plant" data-begin="5"></video>
</script>
<p>Need a Visible controller</p>
<h3>Synchronized Videos</h3>
<script type="syntaxhighlighter" class="brush: html">
<video src="sadie-plant.ogg" controls mediagroup="master"></video>
<video src="michael-moss.ogg" controls mediagroup="master"></video>
</script>
<h3>2 Synced Videos, with an offset</h3>
<script type="syntaxhighlighter" class="brush: html">
<video controls src="sadie-plant.ogg" mediagroup="master">video 1</video>
<video begin="10s" controls src="michael-moss.ogg" mediagroup="master">video 2</video>
</script>
<h3><a name="simplesubtitles">Simple subtitles</a></h3>
<p>
Example of a single video connected to timed subtitles.
</p>
<script type="syntaxhighlighter" class="brush: html">
<video controls src="sadie-plant.ogg" mediagroup="sadie-plant">video</video>
<div mediagroup="sadie-plant">
<div data-begin="00:02:21,766" data-end="00:03:19,393">
I have to begin with many thanks to Femke and Laurence, because it really
has been a great pleasure for me to have been here this weekend. Its nearly
five years since I came to an event like this, believe it or not, and I really
cannot say enough how much I have enjoyed it, and how stimulating I have found
it. So yes, a big thank you to both for getting me here. And as you say, its
ten years since I wrote Zeros + Ones, and you are marking ten years of this
festival too, so its an interesting moment to think about a lot of the issues
that have come up over the weekend. This is a more or less spontaneous report,
very much an open performance, to use Simon Yuills words, and not to be
taken as any kind of definitive account of what has happened this weekend. But
still I hope it can bring a few of the many and varied strands of this event
together, not to form a true conclusion, but perhaps to provide some kind of
digestif after a wonderful meal.
</div>
<div data-begin="00:03:19,393" data-end="00:03:48,937">
I thought I should begin as Femke very wisely began, with the theme of cooking.
Femke gave us a recipe at the beginning of the weekend, really a kind of recipe
for the whole event, with cooking as an example of the fact that there are many
models, many activities, many things that we do in our everyday lives, which
might inform and expand our ideas about technology and how we work with them.
</div>
</div>
</script>
<h3><a name="simplesubtitles">Timed Text</a></h3>
Example of timed text only.
<script type="syntaxhighlighter" class="brush: html">
<div mediagroup="timedtext">
<div data-begin="00:02:21,766" data-end="00:03:19,393">
I have to begin with many thanks to Femke and Laurence, because it really has been a great pleasure for me to have been here this weekend. Its nearly five years since I came to an event like this, believe it or not, and I really cannot say enough how much I have enjoyed it, and how stimulating I have found it. So yes, a big thank you to both for getting me here. And as you say, its ten years since I wrote Zeros + Ones, and you are marking ten years of this festival too, so its an interesting moment to think about a lot of the issues that have come up over the weekend. This is a more or less spontaneous report, very much an open performance, to use Simon Yuills words, and not to be taken as any kind of definitive account of what has happened this weekend. But still I hope it can bring a few of the many and varied strands of this event together, not to form a true conclusion, but perhaps to provide some kind of digestif after a wonderful meal.
</div>
<div data-begin="00:03:19,393" data-end="00:03:48,937">
I thought I should begin as Femke very wisely began, with the theme of cooking. Femke gave us a recipe at the beginning of the weekend, really a kind of recipe for the whole event, with cooking as an example of the fact that there are many models, many activities, many things that we do in our everyday lives, which might inform and expand our ideas about technology and how we work with them.
</div>
</div>
</script>
<h3><a name="simplesubtitles">Overlapping videos</a></h3>
<script type="syntaxhighlighter" class="brush: html">
<par mediagroup="playlist">
<div data-begin="00:01:00" data-end="00:06">
Sadie Plant speaking at VJ10 in Brussels.
<video controls src="sadie-plant.ogg" >video</video>
</div>
<div data-begin="00:05:00">
Michael Moss speaking at VJ12.
<video controls src="michael-moss.ogg" >video</video>
</div>
</par>
</script>
<h3><a name="simplesubtitles">Sequential videos</a></h3>
<script type="syntaxhighlighter" class="brush: html">
<seq mediagroup="playlist">
<div >
Sadie Plant speaking at VJ10 in Brussels.
<video controls src="sadie-plant.ogg" >video</video>
</div>
<div class="title">
Michael Moss speaking at VJ12.
<video controls src="michael-moss.ogg" >video</video>
</div>
</seq>
</script>
<h3><a name="simplesubtitles">Mixed source/type playlist</a></h3>
In a seq, begin times delay the start of each clip by a 3 seconds (3 seconds after the end of the previous element). See <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-timing.html#edef-seq">this example</a>.
<script type="syntaxhighlighter" class="brush: html">
<seq mediagroup="playlist">
<div dur="10s">
Here are some interesting clips.
</div>
<video controls begin="3s" src="http://video.constantvzw.org/sadieplant.ogv#t=00:01:00,00:01:30" >video</video>
<video controls begin="3s" src="http://youtube.com/v/fkasjlfdk#t=00:01:00,00:01:30" >video</video>
<div dur="10s">
That's all folks.
</div>
</seq>
</script>
<h3>Antonia Baeher On Scores</h3>
<script type="syntaxhighlighter" class="brush: xml">
<seq>
<par>
<video>
<video>
</par>
<img dur="">
<audio>
</seq>
<!-- smil -->
<par>
<audio src="interview.ogg"></audio>
<div>
<h2>Chronology</h2>
<div begin="00:01:00">
Baeher explains that working with scores started in fact already before <i>Un apr&egrave;s-midi</i>.
</div>
</div>
<div>
<h2>Visuals</h2>
<img begin="00:00:34" end="00:02:54" src="holdinghands.png">
<img begin="00:02:54" end="00:03:15" src="unapresmidi.png">
</div>
</par>
</script>
<p>"Active Archives" style</p>
<script type="syntaxhighlighter" class="brush: xml">
<audio src="interview.ogg" controls mediagroup="interview.ogg"></audio>
<div about="interview.ogg" mediagroup="interview.ogg">
<h2>Chronology</h2>
<div begin="00:01:00">
Baeher explains that working with scores started in fact already before <a rel="aa:title"><i>Un apr&egrave;s-midi</i></a>.
</div>
</div>
<div about="interview.ogg" mediagroup="interview.ogg">
<h2>Visuals</h2>
<img begin="00:00:34" end="00:02:54" src="holdinghands.png">
<img begin="00:02:54" end="00:03:15" src="unapresmidi.png">
</div>
<!-- Cinematic example, aka "master timeline" -->
<p>Two controllers, master and audio.</p>
<p begin="00:00" end="01:00" mediagroup="master">Introduction....</p>
<div begin="01:10" mediagroup="master">
<audio src="interview.ogg" controls mediagroup="interview.ogg"></audio>
</div>
<div about="interview.ogg" mediagroup="interview.ogg">
<h2>Chronology</h2>
<div begin="00:01:00">
Baeher explains that working with scores started in fact already before <a rel="aa:title"><i>Un apr&egrave;s-midi</i></a>.
</div>
</div>
<div about="interview.ogg" mediagroup="interview.ogg">
<h2>Visuals</h2>
<img begin="00:00:34" end="00:02:54" src="holdinghands.png">
<img begin="00:02:54" end="00:03:15" src="unapresmidi.png">
</div>
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Active Archives: jquery.playable.js</title>
<!-- jquery -->
<script src="../lib/jquery/jquery-1.7.1.min.js"></script>
<script src="../lib/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<link rel="stylesheet" href="../lib/jquery/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
<!-- swfobject (used by jquery.playable.youtube.js) -->
<script src="../lib/swfobject/swfobject.js"></script>
<!-- syntaxhighlighter -->
<script src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
<script src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
<script src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
<link href="../lib/syntaxhighlighter/styles/shCore.css" rel="stylesheet" />
<link href="../lib/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" />
<script src="../source/jquery.datetimecode.js"></script>
<script src="../source/jquery.playable.js"></script>
<script src="../source/jquery.playable.voidplayer.js"></script>
<script src="../source/jquery.playable.youtube.js"></script>
<link rel="stylesheet" href="../css/styles.css" type="text/css" />
<style type="text/css" media="screen">
</style>
<script>
$(document).ready(function () {
SyntaxHighlighter.all();
$(".playset").each(function () {
var context = this;
var scrubber = $(".scrubber", context);
var thumb = $(".thumb", context);
var inpoint = $(".inpoint", context);
var outpoint = $(".outpoint", context);
var playable = $(".playable", context);
var scrubbing, playing_on_scrub_start;
function position_to_time (controlelt) {
var l = parseInt(controlelt.css("left"));
var p = (l / (scrubber.width() - controlelt.width()));
var d = playable.playable("duration") || 3600;
// console.log("p", p, "d", d);
return p*d;
}
function time_to_position (ct, controlelt) {
var d = playable.playable("duration") || 3600;
var l = (ct/d) * (scrubber.width() - controlelt.width());
return Math.floor(l);
}
// Respond to events to update interface (optional)
playable.bind('play', function () {
scrubber.addClass("playing");
$(".play", context).text("pause");