Commit 6f7801d9 authored by Michael Murtaugh's avatar Michael Murtaugh
Browse files

index, no escaping yet

parent ee526336
......@@ -7,8 +7,230 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<!-- Highlight.js -->
<script src="http://yandex.st/highlightjs/5.16/highlight.min.js"></script>
<link rel="stylesheet" href="http://yandex.st/highlightjs/5.16/styles/zenburn.min.css">
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>
</head>
<body>
</body>
<body>
<p>
A Timeline corresponds to a virtual media element, that may contain other media elements.
Timeline is a partial implementation of the <a href="http://www.w3.org/TR/html5/video.html#synchronising-multiple-media-elements">HTML5 "controller"</a>, and mixes in some ideas from SMIL & <a href="http://www.w3.org/TR/media-frags">Media Fragments</a>.
</p>
<p>NB: Timeline follows an approach of using of temporal HTML, that is mixing in timing to existing HTML+CSS+Javascript, as opposed to introducting a new and external format for text / subtitles (like WebSRT, WebVVT ? cf?).
</p>
<h2>Examples</h2>
<ul>
<li>Simple subtitles: video + timed titles, inpage</li>
<li>"Void player": timed text</li>
<li> >1 video on a single timeline, sequential</li>
<li> >1 video on a single timeline, overlapping (synchronization)</li>
</ul>
<a href="http://blog.gingertech.net/2011/05/01/html5-multi-track-audio-or-video/">Sylvia Pfeiffer's blog entry</a>
<pre>
The algorithm:
1. Add all audio, video tags to the controller specified by their mediagroup (or create a controller based on their source)
$("video[mediagroup]|audio[mediagroup]").each(function() {
var mediagroup = $(this).attr("mediagroup") || $(this).attr("src");
var controller = controllerForMediaGroup(mediagroup);
var begin = $(this).attr("data-begin");
var end = $(this).attr("data-end");
controller.add(this, begin, end);
});
2. Find all things with timing, and add to the controller corresponding to the closest mediagroup attribute (on the element itself, or in an ancestor).
in code:
$("[data-begin]").each(function () {
var mediagroup = $(this).closest("[mediagroup]").attr("mediagroup");
var controller = controllerForMediaGroup(mediagroup);
var begin = $(this).attr("data-begin");
var end = $(this).attr("data-end");
controller.add(this, begin, end);
});
</pre>
<h2>Hello world (one video wrapped in a controller)</h2>
<p>
Example of a single video connected to controller. Proxies methods like play / pause. Echoes the media events (like play, timeupdate)
</p>
<pre class="html"><code>
<video controls src="sadie-plant.ogg" mediagroup="sadie-plant.ogg">video</video>
</code></pre>
<h2>Hello world 2 (one video wrapped in a controller, with an offset)</h2>
<p>
5 second delay, then the video plays (from start to end). (cf is begin == startOffsetTime? attribute of HTML5 Media Elements)
</p>
<pre class="html"><code>
<video begin="5" controls src="sadie-plant.ogg" mediagroup="sadie-plant.ogg">video</video>
</code></pre>
<h2>2 Synced Videos</h2>
<pre class="html"><code>
<video controls src="sadie-plant.ogg" mediagroup="master">video 1</video>
<video controls src="michael-moss.ogg" mediagroup="master">video 2</video>
</code></pre>
<h2>2 Synced Videos, with an offset</h2>
<pre class="html"><code>
<video controls src="sadie-plant.ogg" mediagroup="master">video 1</video>
<video begin="10s" controls src="michael-moss.ogg" mediagroup="master">video 2</video>
</code></pre>
<h2><a name="simplesubtitles">Simple subtitles</a></h2>
<p>
Example of a single video connected to timed subtitles.
</p>
<pre class="html"><code>
<video controls src="sadie-plant.ogg" mediagroup="sadie-plant.ogg">video</video>
<div id="subtitles" mediagroup="sadie-plant.ogg">
<div class="title" 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. It’s 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, it’s ten years since I wrote Zeros + Ones, and you are marking ten years of this festival too, so it’s 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 Yuill’s 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 class="title" 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>
</code></pre>
<h2><a name="simplesubtitles">Timed Text</a></h2>
Example of timed text only.
<pre class="html"><code>
<div id="timedtext" mediagroup="timedtext">
<div class="title" 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. It’s 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, it’s ten years since I wrote Zeros + Ones, and you are marking ten years of this festival too, so it’s 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 Yuill’s 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 class="title" 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>
</code></pre>
<h2><a name="simplesubtitles">Overlapping videos</a></h2>
<pre class="html"><code>
<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>
</code></pre>
<h2><a name="simplesubtitles">Sequential videos</a></h2>
<pre class="html"><code>
<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>
</code></pre>
<h2><a name="simplesubtitles">Mixed source/type playlist</a></h2>
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>.
<pre class="html"><code>
<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>
</code></pre>
<h2>Antonia Baeher On Scores</h2>
<pre class="html"><code>
<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>
<!-- active archives style -->
<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>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment