[html5] r4685 - [e] (0) Add an example of forcing fallback from <source>.

[whatwg at whatwg.org]

Author: ianh
Date: 2010-02-09 18:27:42 -0800 (Tue, 09 Feb 2010)
New Revision: 4685

Modified:
   complete.html
   index
   source
Log:
[e] (0) Add an example of forcing fallback from <source>.

Modified: complete.html
===================================================================
--- complete.html	2010-02-10 02:14:17 UTC (rev 4684)
+++ complete.html	2010-02-10 02:27:42 UTC (rev 4685)
@@ -21749,8 +21749,32 @@
 
   </div>
 
+  <div class=example>
 
+   <p>If the author isn't sure if the user agents will all be able to
+   render the media resources provided, the author can listen to the
+   <code title=event-error>error</code> event on the last
+   <code><a href=#the-source-element>source</a></code> element and trigger fallback behaviour:</p>
 
+   <pre><video controls autoplay>
+ <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+ <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
+         onerror="fallback(parentNode)">
+ ...
+</video>
+<script>
+ function fallback(video) {
+   // replace <video> with its contents
+   while (video.hasChildNodes())
+     video.parentNode.insertBefore(video.firstChild, video);
+   video.parentNode.removeChild(video);
+ }
+</script></pre>
+
+  </div>
+
+
+
   <h4 id=media-elements><span class=secno>4.8.9 </span>Media elements</h4>
 
   <p><dfn id=media-element title="media element">Media elements</dfn> implement the

Modified: index
===================================================================
--- index	2010-02-10 02:14:17 UTC (rev 4684)
+++ index	2010-02-10 02:27:42 UTC (rev 4685)
@@ -21648,8 +21648,32 @@
 
   </div>
 
+  <div class=example>
 
+   <p>If the author isn't sure if the user agents will all be able to
+   render the media resources provided, the author can listen to the
+   <code title=event-error>error</code> event on the last
+   <code><a href=#the-source-element>source</a></code> element and trigger fallback behaviour:</p>
 
+   <pre><video controls autoplay>
+ <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+ <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
+         onerror="fallback(parentNode)">
+ ...
+</video>
+<script>
+ function fallback(video) {
+   // replace <video> with its contents
+   while (video.hasChildNodes())
+     video.parentNode.insertBefore(video.firstChild, video);
+   video.parentNode.removeChild(video);
+ }
+</script></pre>
+
+  </div>
+
+
+
   <h4 id=media-elements><span class=secno>4.8.9 </span>Media elements</h4>
 
   <p><dfn id=media-element title="media element">Media elements</dfn> implement the

Modified: source
===================================================================
--- source	2010-02-10 02:14:17 UTC (rev 4684)
+++ source	2010-02-10 02:27:42 UTC (rev 4685)
@@ -23279,8 +23279,32 @@
 
   </div>
 
+  <div class="example">
 
+   <p>If the author isn't sure if the user agents will all be able to
+   render the media resources provided, the author can listen to the
+   <code title="event-error">error</code> event on the last
+   <code>source</code> element and trigger fallback behaviour:</p>
 
+   <pre><video controls autoplay>
+ <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+ <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
+         onerror="fallback(parentNode)">
+ ...
+</video>
+<script>
+ function fallback(video) {
+   // replace <video> with its contents
+   while (video.hasChildNodes())
+     video.parentNode.insertBefore(video.firstChild, video);
+   video.parentNode.removeChild(video);
+ }
+</script></pre>
+
+  </div>
+
+
+
   <h4>Media elements</h4>
 
   <p><dfn title="media element">Media elements</dfn> implement the