[xiph-commits] r4082 - itext
silvia at svn.annodex.net
silvia at svn.annodex.net
Mon Mar 8 18:54:11 PST 2010
Author: silvia
Date: 2010-03-08 18:54:11 -0800 (Mon, 08 Mar 2010)
New Revision: 4082
Modified:
itext/index.html
itext/mediafrag_multiple_servers.html
Log:
Tried including retrieval with new content header.
Modified: itext/index.html
===================================================================
--- itext/index.html 2010-03-08 22:34:06 UTC (rev 4081)
+++ itext/index.html 2010-03-09 02:54:11 UTC (rev 4082)
@@ -133,7 +133,7 @@
<img class="scshot" src="images/mediafrag.png">
</a>
<div class="para">
- <p><a href="mediafrag_multiple_servers.html">Two independent demos of media fragments</a></p>
+ <p><a href="mediafrag_multiple_servers.html">Several demos of media fragments</a></p>
</div>
<div style="clear: both;"/>
</article>
Modified: itext/mediafrag_multiple_servers.html
===================================================================
--- itext/mediafrag_multiple_servers.html 2010-03-08 22:34:06 UTC (rev 4081)
+++ itext/mediafrag_multiple_servers.html 2010-03-09 02:54:11 UTC (rev 4082)
@@ -13,7 +13,7 @@
<h2>URI Query Example</h2>
<div id="NinSuna">
- <p>Davy Van Deursen of the W3C Media Fragments working group implemented a demonstration of media fragment URIs using the URI query (?) mechanism on the <a href="http://ninsuna.elis.ugent.be/">NinSuna platform</a>. It supports only the time and the track dimension - not the id or xyzh dimensions. It also does not (yet) support URI fragments (#) as a specification for media fragment URIs. It will return a complete resource for a query such as: http://ninsuna.elis.ugent.be/DownloadServlet/mfwg/fragf2f.ogv?t=2,9&track='mp4_1'.</p>
+ <p>Davy Van Deursen of the W3C Media Fragments working group implemented a demonstration of media fragment URIs using the URI query (?) mechanism on the <a href="http://ninsuna.elis.ugent.be/">NinSuna platform</a>. It supports the time and the track dimension. It will return a complete resource for a query such as: http://ninsuna.elis.ugent.be/DownloadServlet/mfwg/fragf2f.ogv?t=2,9&track='ogg_1'.</p>
<p>NinSuna is implemented in Java and is both a HTTP and RTSP server. It supports both MP4 and Ogg files.</p>
@@ -22,7 +22,7 @@
<video id="v_NinSuna" width = "426px" height="320px" src="http://ninsuna.elis.ugent.be/DownloadServlet/mfwg/fragf2f.ogv?t=2,9&track='ogg_1'" controls autobuffer>
</video>
- <form name="f_NinSuna" action="javascript:changeVideoUrl(document.videourl,0);" method="">
+ <form name="f_NinSuna" id='url1' method="" action="javascript:changeVideoUrl(document.getElementById('url1'),0);">
<label for="videourl">Change video element url:</label>
<input name="url" type="text" value="http://ninsuna.elis.ugent.be/DownloadServlet/mfwg/fragf2f.ogv?t=2,9&track='ogg_1'" size="70"/>
<input name="button" type="button" value="Change" onclick="changeVideoUrl(this.form,0)"/>
@@ -32,7 +32,7 @@
</div>
- <h2>URI Fragment Example</h2>
+ <h2>URI Fragment Example: UA mapped byte ranges</h2>
<div id="main">
<p>Silvia Pfeiffer of the W3C Media Fragments working group implemented a demonstration of media fragment URIs using the URI fragment (#) mechanism and the HTML5 video element's video seeking functionalities using a new URI load() on the video element. It does not support URI queries (?) on the given server and only works with HTTP. It supports only time fragments and Ogg video.</p>
@@ -55,8 +55,31 @@
<input name="button" type="button" value="Change" onclick="changeVideoUrl(this.form,1)"/>
</form>
+ <p>Use temporal addressing only, e.g. t=40 (in seconds) for a jump to the time offset 40s.</p>
+
</div>
+
+ <h2>URI Fragment Example: server mapped byte ranges</h2>
+
+ <div id="NinSuna2">
+ <p><a href="http://ninsuna.elis.ugent.be">NinSuna</a> also supports URI fragments (#) as requested via HTTP Range requests. It supports the time, the track, and the xyzh dimensions - but not the id dimension. It can return byte ranges of the complete resource for a URI fragment request such as: http://ninsuna.elis.ugent.be/DownloadServlet/mfwg/fragf2f.ogv#t=2,9&track='ogg_1'.</p>
+
+ <p>The following video is a Ogg video served by NinSuna and allows loading different fragments of the resource by changing the url given on the <video> element:</p>
+
+ <video id="v_NinSuna" width = "426px" height="320px" src="http://ninsuna.elis.ugent.be/DownloadServlet/mfwg/fragf2f.ogv#t=2,9" controls>
+ </video>
+
+ <form name="f_NinSuna" action="javascript:changeVideoFragment(document.videourl,2);" method="">
+ <label for="videourl">Change video element url:</label>
+ <input name="url" type="text" value="http://ninsuna.elis.ugent.be/DownloadServlet/mfwg/fragf2f.ogv#t=2,9" size="70"/>
+ <input name="button" type="button" value="Change" onclick="changeVideoFragment(this.form,2)"/>
+ </form>
+
+ <p>For this demo, use temporal addressing only, e.g. t=40,60 (in seconds) for a jump to the time offset 40s and loading/playback till 60s.</p>
+
+ </div>
+
<p>Note: The demo works best in Firefox version >= 3.5, but also in the latest experimental releases of Safari (with XiphQT installed), Opera and Chrome. It will not work in IE.</p>
<p>Note: The demo only takes time in float format for seconds - no other parsing or even error handling has been implemented yet.</p>
@@ -81,6 +104,45 @@
// END: THIS SHOULD BE NATIVE IN BROWSER
}, false);
+ function loadVideoFragment(video, range) {
+ var client = new XMLHttpRequest();
+ client.open('GET', video);
+ client.setRequestHeader('Range', range);
+ client.send();
+ client.onreadystatechange = function() {
+ if(this.readyState == 2) {
+ console.log(client.getAllResponseHeaders());
+ }
+ }
+ }
+
+ // for third video:
+ // once video is loaded, retrieve data for time offset and jump to it
+ video[2].addEventListener("loadedmetadata", function () {
+ // calculate video url & offset
+ // load data for fragment
+ // jump to offset given in video url
+ // START: THIS SHOULD BE NATIVE IN BROWSER
+ var videourl = video[2].currentSrc;
+ var videooffset = retrieveTimeFragment(videourl);
+ var start,end;
+ if (videooffset != 0) {
+ start = videooffset.split(',')[2];
+ end = videooffset.split(',')[1];
+ var range="t="+start+"-"+end;
+ video[2].addEventListener("timeupdate", function() {
+ if (video[2].currentTime >= end) {
+ video[2].pause();
+ video[2].removeEventListener("timeupdate", arguments.callee, false);
+ }
+ }, false);
+ loadVideoFragment(videourl, range);
+ video[2].currentTime = start;
+ }
+ // END: THIS SHOULD BE NATIVE IN BROWSER
+ }, false);
+
+
// jump to time offset action
function jumpToTimeoffset(form, video_index) {
var time = form.time.value;
@@ -99,15 +161,15 @@
// parse the time hash out of the given url
function retrieveTimeFragment(url) {
var pageoffset = 0;
- var offsettime = 0;
+ var offsettime = 0;
if (url.split("#")[1] != null) {
- pageoffset = url.split("#")[1];
- if (pageoffset.substring(2) != null) {
- offsettime = pageoffset.substring(2);
+ pageoffset = url.split("#")[1];
+ if (pageoffset.substring(2) != null) {
+ offsettime = pageoffset.substring(2);
+ }
}
+ return offsettime;
}
- return offsettime;
- }
</script>
More information about the commits
mailing list