[xiph-commits] r4075 - itext
silvia at svn.annodex.net
silvia at svn.annodex.net
Thu Feb 11 20:37:52 PST 2010
Author: silvia
Date: 2010-02-11 20:37:51 -0800 (Thu, 11 Feb 2010)
New Revision: 4075
Added:
itext/elephant_separate_audesc_dub.html
Log:
Added a test for synchronising separate audio and video files using JavaScript.
Added: itext/elephant_separate_audesc_dub.html
===================================================================
--- itext/elephant_separate_audesc_dub.html (rev 0)
+++ itext/elephant_separate_audesc_dub.html 2010-02-12 04:37:51 UTC (rev 4075)
@@ -0,0 +1,294 @@
+<!-- ***** BEGIN LICENSE BLOCK *****
+ - Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ -
+ - The contents of this file are subject to the Mozilla Public License Version
+ - 1.1 (the "License"); you may not use this file except in compliance with
+ - the License. You may obtain a copy of the License at
+ - http://www.mozilla.org/MPL/
+ -
+ - Software distributed under the License is distributed on an "AS IS" basis,
+ - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ - for the specific language governing rights and limitations under the
+ - License.
+ -
+ - The Original Code is HTML5 video multiple media files synchronisatin
+ - demonstration code.
+ -
+ - The Initial Developer of the Original Code is Mozilla Corporation.
+ - Portions created by the Initial Developer are Copyright (C) 2010
+ - the Initial Developer. All Rights Reserved.
+ -
+ - Contributor(s):
+ - Silvia Pfeiffer <silvia at silvia-pfeiffer.de>
+ -
+ - Alternatively, the contents of this file may be used under the terms of
+ - either the GNU General Public License Version 2 or later (the "GPL"), or
+ - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ - in which case the provisions of the GPL or the LGPL are applicable instead
+ - of those above. If you wish to allow use of your version of this file only
+ - under the terms of either the GPL or the LGPL, and not to allow others to
+ - use your version of this file under the terms of the MPL, indicate your
+ - decision by deleting the provisions above and replace them with the notice
+ - and other provisions required by the LGPL or the GPL. If you do not delete
+ - the provisions above, a recipient may use your version of this file under
+ - the terms of any one of the MPL, the GPL or the LGPL.
+ -
+ - ***** END LICENSE BLOCK ***** -->
+
+<!DOCTYPE HTML>
+<html lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <script type="text/javascript" src="javascript/jquery.js"></script>
+
+ <style type="text/css">
+ #menu li, #currtimes li {
+ list-style-type:none;
+ }
+ div.seeker {
+ width: 426px;
+ }
+ div.bar {
+ height:16px;
+ min-width:40px;
+ }
+ div.bar div.fill {
+ background:url("skins/schmucker/images/bar.png") repeat-x scroll left top transparent;
+ height:inherit;
+ position:relative;
+ }
+ div.seeker div.progress {
+ background:url("skins/schmucker/images/bar_filler_or.png") repeat-x scroll left top transparent;
+ height:inherit;
+ width:0;
+ }
+ div.bar div.progress {
+ height:inherit;
+ left:0;
+ position:absolute;
+ top:0;
+ }
+ div.seeker div.limiter {
+ height:inherit;
+ margin-left:8px;
+ margin-right:7px;
+ position:relative;
+ }
+ div.seeker div.handle {
+ background:url("skins/schmucker/images/bar_throbber.png") no-repeat scroll left top transparent;
+ height:inherit;
+ left:0;
+ margin-left:-7px;
+ position:absolute;
+ width:13px;
+ }
+ </style>
+
+ <script type="text/javascript">
+ // remove space action scrolling
+ window.addEventListener('keydown',function(e){if(e.keyCode==32){e.preventDefault();}},true);
+
+ // play/pause toggle with space bar
+ function space_playpause(e) {
+ if (e.keyCode == 32) {
+ playpause();
+ }
+ }
+
+ // move all current playback times to same time
+ function playTime(time) {
+ tracks = jQuery("div#tracks").children();
+ for (i=0; i<tracks.length; i++) {
+ tracks[i].currentTime = time;
+ }
+ }
+
+ // play/pause toggle
+ function playpause() {
+ tracks = jQuery("div#tracks").children();
+ video = tracks[0];
+ if (video.paused) {
+ // resynch tracks
+ playTime(video.currentTime);
+ // play tracks together, if selected
+ tracks[0].play();
+ for (i=1; i<tracks.length; i++) {
+ if (jQuery("ul#menu input")[i-1].checked==true) {
+ tracks[i].play();
+ }
+ }
+ } else {
+ for (i=0; i<tracks.length; i++) {
+ tracks[i].pause();
+ }
+ }
+ }
+
+ // callback on checkboxes
+ function playstate(element, checked) {
+ var media = jQuery(element)[0];
+ if (checked == true) {
+ if (video.playing) {
+ media.currentTime = video.currentTime;
+ media.play();
+ }
+ } else {
+ media.pause();
+ }
+ }
+
+ // periodically display sync time - every 500ms
+ function synctime() {
+ tracks = jQuery("div#tracks").children();
+ for (i=0; i<tracks.length; i++) {
+ jQuery("#currtimes span")[i].innerHTML=tracks[i].currentTime;
+ }
+ }
+ setInterval("synctime()", 500);
+
+ </script>
+ <title>Experiment with video accessibility and time-aligned text</title>
+ </head>
+
+ <body>
+
+ <h1>Demo Multiple Media Resource Synchronisation </h1>
+
+ <div id="main">
+
+ <div id="tracks">
+ <video class="v" src="elephants_dream/elephant.video.ogv" type="video/ogg">
+ </video>
+ <audio class="a1" src="elephants_dream/elephant.audio_description_amp.ogg" type="audio/ogg">
+ </audio>
+ <audio class="a2" src="elephants_dream/elephant.english.ogg" type="audio/ogg">
+ </audio>
+ <audio class="a3" src="elephants_dream/elephant.spanish.ogg" type="audio/ogg">
+ </audio>
+ </div>
+ <br/>
+
+ <button class="play btn" type="button" tabindex="10" title="Play button" onkeypress="space_playpause(event);" onclick="playpause();">Play/Pause</button>
+
+ <div class="seeker bar">
+ <div class="fill">
+ <div class="progress"></div>
+ <div id="transbar" class="limiter">
+ <div class="handle"></div>
+ </div>
+ </div>
+ </div>
+
+ <table>
+ <tr>
+ <td>
+ <ul id="menu">
+ <li>
+ <input type="checkbox" name="a" title="toggle audio description" tabindex="30" checked aria-checked="true" onClick="playstate('.a1', this.checked);"/>
+ English Audio Description
+ </li>
+ <li>
+ <input type="checkbox" name="a" title="toggle English dub" tabindex="40" checked aria-checked="true" onClick="playstate('.a2', this.checked);"/>
+ English Dub
+ </li>
+ <li>
+ <input type="checkbox" name="a" title="toggle Spanish dub" tabindex="50" checked aria-checked="true" onClick="playstate('.a3', this.checked);"/>
+ Spanish Dub
+ </li>
+ </ul>
+ </td>
+ <td>
+ <ul id="currtimes">
+ <li>Video: <span id="v1"></span></li>
+ <li>Audio Description: <span id="a1"></span></li>
+ <li>English Dub: <span id="a2"></span></li>
+ <li>Spanish Dub: <span id="a3"></span></li>
+ </ul>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+</div>
+
+<p>There are one video and three audio files that are played in parallel. You can watch how they go out of sync over time unless you pause, which re-syncs.</p>
+
+<p>Note: The demo works best in Firefox version >= 3.5, but also in Chrome. It doesn't work (well) in Chrome or Safari. It will not work in IE.</p>
+
+<h1>Experiment description</h1>
+
+<p>This experiments with synchronising multiple media files with each other. Features:</p>
+<ul>
+ <li>The main track is just the video without audio.</li>
+ <li>There is an English sound track,</li>
+ <li>a Spanish dub track, and</li>
+ <li>an English Audio Description.</li>
+ <li>The files are composed together like tracks of a single media source and made selectable through a menu.</li>
+ <li>Every 500ms the currentTime of the media elements is displayed.</li>
+</ul>
+
+<p>The main elements of this Web page are:</p>
+<pre>
+ <div id="tracks">
+ <video class="v" src="elephants_dream/elephant.video.ogv" type="video/ogg">
+ </video>
+ <audio class="a1" src="elephants_dream/elephant.audio_description_amp.ogg" type="audio/ogg">
+ </audio>
+ <audio class="a2" src="elephants_dream/elephant.spanish.ogg" type="audio/ogg">
+ </audio>
+ <audio class="a3" src="elephants_dream/elephant.english.ogg" type="audio/ogg">
+ </audio>
+ </div>
+</pre>
+
+<h2>Credits</h2>
+
+<p>Thanks to the Orange Open Movie Team for the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons licensed</a> "Elephants Dream" movie that was used as an example here, (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org.</p>
+
+<p>Spanish dub available from <a href="http://www.blendernation.com/elephants-dream-spanish-dub/">Sebastian Arias</a> (http://www.youtube.com/watch?v=132x5VWVJ44).</p>
+
+<p>The Audio Description was done by Silvia Pfeiffer using the <a href="http://en.wikipedia.org/wiki/Elephants_Dream#Descriptive_storyline">Wikipedia descriptive storyline for Elephants Dream</a>.</p>
+
+<script type="text/javascript">
+// get video element
+var video = document.getElementsByTagName("video")[0];
+
+video.addEventListener("progress", function(evt) {
+ if(evt.lengthComputable && evt.total) {
+ value = "width:"+((evt.loaded/evt.total)*100)+"%";
+ jQuery("div.progress").attr("style",value);
+ }
+}, false);
+
+video.addEventListener("timeupdate", function(evt) {
+ value = "left:"+((video.currentTime/video.duration)*100)+"%";
+ jQuery("div.handle").attr("style",value);
+}, false);
+
+// get transport bar element
+var transbar = document.getElementById("transbar");
+
+transbar.addEventListener("mousedown", function(evt) {
+ var handle=jQuery("div.handle");
+ var transb=jQuery("div#transbar");
+ // get position
+ var x=evt.layerX;
+ var width=transb.width();
+ var p=x/width;
+ // make sure percentage is legal
+ if(p>1) {
+ p=1;
+ }
+ if(p<0) {
+ p=0;
+ }
+ // set handle to correct position
+ value = "left:"+(p*100)+"%";
+ handle.attr("style",value);
+ // move video playback position
+ playTime(p * video.duration);
+}, false);
+
+</script>
+ </body>
+</html>
More information about the commits
mailing list