[html5] r6210 - [giow] (0) Example of automatically showing a sign-language track when one is av [...]

whatwg at whatwg.org whatwg at whatwg.org
Fri Jun 10 13:38:03 PDT 2011


Author: ianh
Date: 2011-06-10 13:38:01 -0700 (Fri, 10 Jun 2011)
New Revision: 6210

Modified:
   complete.html
   index
   source
Log:
[giow] (0) Example of automatically showing a sign-language track when one is available

Modified: complete.html
===================================================================
--- complete.html	2011-06-09 22:39:13 UTC (rev 6209)
+++ complete.html	2011-06-10 20:38:01 UTC (rev 6210)
@@ -239,7 +239,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1>Web Applications 1.0</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 9 June 2011</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 10 June 2011</h2>
    </hgroup><dl><dt>Multiple-page version:</dt>
     <dd><a href=http://www.whatwg.org/specs/web-apps/current-work/complete/>http://www.whatwg.org/specs/web-apps/current-work/complete/</a></dd>
     <dt>One-page version:</dt>
@@ -29189,7 +29189,43 @@
 
   </div>
 
+  <div class=example>
 
+   <p>In this example, a script defines a function that takes a URL to
+   a video and a reference to an element where the video is to be
+   placed. That function then tries to load the video, and, once it is
+   loaded, checks to see if there is a sign-language track available.
+   If there is, it also displays that track. Both tracks are just
+   placed in the given container; it's assumed that styles have been
+   applied to make this work in a pretty way!</p>
+
+   <pre><script>
+ function loadVideo(url, container) {
+   var controller = new MediaController();
+   var video = document.createElement('video');
+   video.src = url;
+   video.autoplay = true;
+   video.controls = true;
+   video.controller = controller;
+   container.appendChild(video);
+   video.onloadedmetadata = function (event) {
+     for (var i = 0; i < video.videoTracks.length; i += 1) {
+       if (video.videoTracks.getKind(i) == 'sign') {
+         var sign = document.createElement('video');
+         sign.src = url + '#track=' + video.videoTracks.getID(i);
+         sign.autoplay = true;
+         sign.controller = controller;
+         container.appendChild(sign);
+         return;
+       }
+     }
+   };
+ }
+</script></pre>
+
+  </div>
+
+
 <!--PEERCONNECTION-->
   <h6 id=tracklist-objects><span class=secno>4.8.10.10.1 </span><code><a href=#tracklist>TrackList</a></code> objects</h6>
 

Modified: index
===================================================================
--- index	2011-06-09 22:39:13 UTC (rev 6209)
+++ index	2011-06-10 20:38:01 UTC (rev 6210)
@@ -243,7 +243,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 9 June 2011</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 10 June 2011</h2>
    </hgroup><dl><dt><strong>Web developer edition</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -29182,7 +29182,43 @@
 
   </div>
 
+  <div class=example>
 
+   <p>In this example, a script defines a function that takes a URL to
+   a video and a reference to an element where the video is to be
+   placed. That function then tries to load the video, and, once it is
+   loaded, checks to see if there is a sign-language track available.
+   If there is, it also displays that track. Both tracks are just
+   placed in the given container; it's assumed that styles have been
+   applied to make this work in a pretty way!</p>
+
+   <pre><script>
+ function loadVideo(url, container) {
+   var controller = new MediaController();
+   var video = document.createElement('video');
+   video.src = url;
+   video.autoplay = true;
+   video.controls = true;
+   video.controller = controller;
+   container.appendChild(video);
+   video.onloadedmetadata = function (event) {
+     for (var i = 0; i < video.videoTracks.length; i += 1) {
+       if (video.videoTracks.getKind(i) == 'sign') {
+         var sign = document.createElement('video');
+         sign.src = url + '#track=' + video.videoTracks.getID(i);
+         sign.autoplay = true;
+         sign.controller = controller;
+         container.appendChild(sign);
+         return;
+       }
+     }
+   };
+ }
+</script></pre>
+
+  </div>
+
+
 <!--PEERCONNECTION-->
   <h6 id=tracklist-objects><span class=secno>4.8.10.10.1 </span><code><a href=#tracklist>TrackList</a></code> objects</h6>
 

Modified: source
===================================================================
--- source	2011-06-09 22:39:13 UTC (rev 6209)
+++ source	2011-06-10 20:38:01 UTC (rev 6210)
@@ -31937,7 +31937,43 @@
 
   </div>
 
+  <div class="example">
 
+   <p>In this example, a script defines a function that takes a URL to
+   a video and a reference to an element where the video is to be
+   placed. That function then tries to load the video, and, once it is
+   loaded, checks to see if there is a sign-language track available.
+   If there is, it also displays that track. Both tracks are just
+   placed in the given container; it's assumed that styles have been
+   applied to make this work in a pretty way!</p>
+
+   <pre><script>
+ function loadVideo(url, container) {
+   var controller = new MediaController();
+   var video = document.createElement('video');
+   video.src = url;
+   video.autoplay = true;
+   video.controls = true;
+   video.controller = controller;
+   container.appendChild(video);
+   video.onloadedmetadata = function (event) {
+     for (var i = 0; i < video.videoTracks.length; i += 1) {
+       if (video.videoTracks.getKind(i) == 'sign') {
+         var sign = document.createElement('video');
+         sign.src = url + '#track=' + video.videoTracks.getID(i);
+         sign.autoplay = true;
+         sign.controller = controller;
+         container.appendChild(sign);
+         return;
+       }
+     }
+   };
+ }
+</script></pre>
+
+  </div>
+
+
 <!--START rtc--><!--PEERCONNECTION-->
   <h6><code>TrackList</code> objects</h6>
 




More information about the Commit-Watchers mailing list