[xiph-commits] r3987 - in itext: . javascript skins/schmucker
silvia at svn.annodex.net
silvia at svn.annodex.net
Sun Aug 2 06:04:58 PDT 2009
Author: silvia
Date: 2009-08-02 06:04:58 -0700 (Sun, 02 Aug 2009)
New Revision: 3987
Added:
itext/elephant_no_skin.html
itext/elephant_with_skin.html
Removed:
itext/elephant.html
Modified:
itext/
itext/index.html
itext/javascript/subtitles.js
itext/skins/schmucker/tinyvid.js
Log:
Added a demo without the skin just using the default controls.
Not as nice looking, but better accessibility.
Property changes on: itext
___________________________________________________________________
Modified: bzr:revision-info
- timestamp: 2009-08-02 09:38:33.621000051 +1000
committer: Silvia Pfeiffer <silvia.pfeiffer at vquence.com>
properties:
branch-nick: silvia
+ timestamp: 2009-08-02 23:04:00.528000116 +1000
committer: Silvia Pfeiffer <silvia.pfeiffer at vquence.com>
properties:
branch-nick: silvia
Modified: bzr:file-ids
- elephant.html elephant.html-20090801091219-j75rjxuqu8rsxt53-1
index.html index.html-20090718094218-d45036mvytq5pecp-3
+ elephant_no_skin.html elephant_no_skin.htm-20090802130343-dlzxqj7cts3o0n1v-1
elephant_with_skin.html elephant.html-20090801091219-j75rjxuqu8rsxt53-1
index.html index.html-20090718094218-d45036mvytq5pecp-3
javascript/subtitles.js subtitles.js-20090718094218-d45036mvytq5pecp-10
skins/schmucker/tinyvid.js tinyvid.js-20090718094218-d45036mvytq5pecp-53
Modified: bzr:revision-id:v4
- 1 silvia.pfeiffer at vquence.com-20090713110521-cz7evclxohf4rbs2
2 silvia.pfeiffer at vquence.com-20090714003359-apmpuor2ttarph5n
3 silvia.pfeiffer at vquence.com-20090714143931-q6j8ritt91jn5rhu
4 silvia.pfeiffer at vquence.com-20090718094222-58zgcmsg9gggbnt1
5 silvia.pfeiffer at vquence.com-20090718094708-wb83p9u6jr1xlhm6
6 silvia.pfeiffer at vquence.com-20090718095409-p6en5qufj62m8w3h
7 silvia.pfeiffer at vquence.com-20090718113424-9s8cmt1guxj6qoky
8 silvia.pfeiffer at vquence.com-20090718113445-n0q9c14w4i11pe36
9 silvia.pfeiffer at vquence.com-20090718123622-xdp52y76dvpem2ya
10 silvia.pfeiffer at vquence.com-20090718131644-69y0zml0ccbwc5er
11 silvia.pfeiffer at vquence.com-20090719002119-ekzto9pc7jqs3gw9
12 silvia.pfeiffer at vquence.com-20090719120832-srm8qemvr5jjy67w
13 silvia.pfeiffer at vquence.com-20090719130420-s7xjh35zrfj8117x
14 silvia.pfeiffer at vquence.com-20090720065454-m2g8tcjgpgw8aetr
15 silvia.pfeiffer at vquence.com-20090720131039-ivpstebztd7u3vwx
16 silvia.pfeiffer at vquence.com-20090720190949-r4ahzq2regl7opf1
17 silvia.pfeiffer at vquence.com-20090720210510-i54efp8a9sem4g6g
18 silvia.pfeiffer at vquence.com-20090721063829-4pvft92pnt7k966p
19 silvia.pfeiffer at vquence.com-20090721065410-0miir37pbb73k35r
20 silvia.pfeiffer at vquence.com-20090721065911-9ngk00aeujudpw8p
21 silvia.pfeiffer at vquence.com-20090721121059-uthu2kmvu74zjv06
22 silvia.pfeiffer at vquence.com-20090721125735-lwwo9ivbdhj0jdhp
23 silvia.pfeiffer at vquence.com-20090721130655-sdqdgbs0lexyrwh5
24 silvia.pfeiffer at vquence.com-20090721143346-065b9v0rr1tcmyg0
25 silvia.pfeiffer at vquence.com-20090722010421-9sx8ynfzcoxh1eai
26 silvia.pfeiffer at vquence.com-20090722014433-yrqaapi0kmfec1oh
27 silvia.pfeiffer at vquence.com-20090722062945-586zxe3smxv1gdcw
28 silvia.pfeiffer at vquence.com-20090727123838-lcxe2fb7n2111ipd
29 silvia.pfeiffer at vquence.com-20090728151700-ai24t8itvj8hxs0c
30 silvia.pfeiffer at vquence.com-20090728210031-2n53wzpuledyqg9w
31 silvia.pfeiffer at vquence.com-20090730034353-pcrnaae01i2q5430
32 silvia.pfeiffer at vquence.com-20090731122706-nrrle33ore1cjl87
33 silvia.pfeiffer at vquence.com-20090801092101-zyu1s0ntmio5bihb
34 silvia.pfeiffer at vquence.com-20090801092534-5pvl2ehkqi87p9le
35 silvia.pfeiffer at vquence.com-20090801233833-xa51k548ng1tqxso
+ 1 silvia.pfeiffer at vquence.com-20090713110521-cz7evclxohf4rbs2
2 silvia.pfeiffer at vquence.com-20090714003359-apmpuor2ttarph5n
3 silvia.pfeiffer at vquence.com-20090714143931-q6j8ritt91jn5rhu
4 silvia.pfeiffer at vquence.com-20090718094222-58zgcmsg9gggbnt1
5 silvia.pfeiffer at vquence.com-20090718094708-wb83p9u6jr1xlhm6
6 silvia.pfeiffer at vquence.com-20090718095409-p6en5qufj62m8w3h
7 silvia.pfeiffer at vquence.com-20090718113424-9s8cmt1guxj6qoky
8 silvia.pfeiffer at vquence.com-20090718113445-n0q9c14w4i11pe36
9 silvia.pfeiffer at vquence.com-20090718123622-xdp52y76dvpem2ya
10 silvia.pfeiffer at vquence.com-20090718131644-69y0zml0ccbwc5er
11 silvia.pfeiffer at vquence.com-20090719002119-ekzto9pc7jqs3gw9
12 silvia.pfeiffer at vquence.com-20090719120832-srm8qemvr5jjy67w
13 silvia.pfeiffer at vquence.com-20090719130420-s7xjh35zrfj8117x
14 silvia.pfeiffer at vquence.com-20090720065454-m2g8tcjgpgw8aetr
15 silvia.pfeiffer at vquence.com-20090720131039-ivpstebztd7u3vwx
16 silvia.pfeiffer at vquence.com-20090720190949-r4ahzq2regl7opf1
17 silvia.pfeiffer at vquence.com-20090720210510-i54efp8a9sem4g6g
18 silvia.pfeiffer at vquence.com-20090721063829-4pvft92pnt7k966p
19 silvia.pfeiffer at vquence.com-20090721065410-0miir37pbb73k35r
20 silvia.pfeiffer at vquence.com-20090721065911-9ngk00aeujudpw8p
21 silvia.pfeiffer at vquence.com-20090721121059-uthu2kmvu74zjv06
22 silvia.pfeiffer at vquence.com-20090721125735-lwwo9ivbdhj0jdhp
23 silvia.pfeiffer at vquence.com-20090721130655-sdqdgbs0lexyrwh5
24 silvia.pfeiffer at vquence.com-20090721143346-065b9v0rr1tcmyg0
25 silvia.pfeiffer at vquence.com-20090722010421-9sx8ynfzcoxh1eai
26 silvia.pfeiffer at vquence.com-20090722014433-yrqaapi0kmfec1oh
27 silvia.pfeiffer at vquence.com-20090722062945-586zxe3smxv1gdcw
28 silvia.pfeiffer at vquence.com-20090727123838-lcxe2fb7n2111ipd
29 silvia.pfeiffer at vquence.com-20090728151700-ai24t8itvj8hxs0c
30 silvia.pfeiffer at vquence.com-20090728210031-2n53wzpuledyqg9w
31 silvia.pfeiffer at vquence.com-20090730034353-pcrnaae01i2q5430
32 silvia.pfeiffer at vquence.com-20090731122706-nrrle33ore1cjl87
33 silvia.pfeiffer at vquence.com-20090801092101-zyu1s0ntmio5bihb
34 silvia.pfeiffer at vquence.com-20090801092534-5pvl2ehkqi87p9le
35 silvia.pfeiffer at vquence.com-20090801233833-xa51k548ng1tqxso
36 silvia.pfeiffer at vquence.com-20090802130400-k998eftqulgcrp04
Modified: bzr:text-parents
-
+ javascript/subtitles.js silvia.pfeiffer at vquence.com-20090801092101-zyu1s0ntmio5bihb
skins/schmucker/tinyvid.js silvia.pfeiffer at vquence.com-20090722014433-yrqaapi0kmfec1oh
Deleted: itext/elephant.html
===================================================================
--- itext/elephant.html 2009-08-01 23:39:19 UTC (rev 3986)
+++ itext/elephant.html 2009-08-02 13:04:58 UTC (rev 3987)
@@ -1,276 +0,0 @@
-<!-- ***** 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 itext demonstration code.
- -
- - The Initial Developer of the Original Code is Mozilla Corporation.
- - Portions created by the Initial Developer are Copyright (C) 2009
- - 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 ***** -->
-
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <script type="text/javascript" src="javascript/jquery.js"></script>
-
- <script type="text/javascript" src="javascript/srt.js"></script>
- <script type="text/javascript" src="javascript/subtitles.js"></script>
- <link href="styles/subtitles.css" type="text/css" rel="stylesheet"/>
-
- <script type="text/javascript" src="skins/schmucker/tinyvid.js"></script>
- <link href="skins/schmucker/tinyvid.css" type="text/css" rel="stylesheet"/>
-
- <title>Experiment with video accessibility and time-aligned text</title>
- </head>
-
- <body>
-
- <h1>Demo Video Player</h1>
-
- <div id="main">
- <div class="tinyVidPlayer">
-
- <div class="nw"><div class="ne"><div class="nc">
- </div></div></div>
- <div class="mw"><div class="me"><div class="mc">
-
- <div class="itextcontainer"></div>
-
- <video class="v" src="elephants_dream/elephant.ogv" poster="elephants_dream/elephant.png" >
- <!-- Language Tags http://www.iana.org/assignments/language-subtag-registry -->
- <itext id="video_af" lang="af" type="text/srt" charset="ISO-8859" display="auto"
- src="elephants_dream/elephant.afrikaans.srt" category="SUB"></itext>
- <itext id="video_ar" lang="ar" type="text/srt" charset="Windows-1256" display="auto"
- src="elephants_dream/elephant.arabic.srt" category="SUB"></itext>
- <itext id="video_bn" lang="bn" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.bangla.srt" category="SUB"></itext>
- <itext id="video_br" lang="br" type="text/srt" charset="Windows-1252" display="auto"
- src="elephants_dream/elephant.breton.srt" category="SUB"></itext>
- <itext id="video_bg" lang="bg" type="text/srt" charset="Windows-1251" display="auto"
- src="elephants_dream/elephant.bulgarian.srt" category="SUB"></itext>
- <itext id="video_ca" lang="ca" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.catalan-utf8.srt" category="SUB"></itext>
- <itext id="video_zh" lang="zh" type="text/srt" charset="GB18030" display="auto"
- src="elephants_dream/elephant.chinese.srt" category="SUB"></itext>
- <itext id="video_cz" lang="cs" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.czech.srt" category="SUB"></itext>
- <itext id="video_da" lang="da" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.danish.srt" category="SUB"></itext>
- <itext id="video_nl" lang="nl" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.dutch.srt" category="SUB"></itext>
- <itext id="video_en" lang="en" type="text/srt" charset="ISO-8859" display="auto"
- src="elephants_dream/elephant.english.srt" category="SUB"></itext>
- <itext id="video_et" lang="et" type="text/srt" charset="Windows-1252" display="auto"
- src="elephants_dream/elephant.estonian.srt" category="SUB"></itext>
- <itext id="video_fi" lang="fi" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.finnish.srt" category="SUB"></itext>
- <itext id="video_fr" lang="fr" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.french.srt" category="SUB"></itext>
- <itext id="video_de" lang="de" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.german.srt" category="SUB"></itext>
- <itext id="video_el" lang="el" type="text/srt" charset="ISO-8859-7" display="auto"
- src="elephants_dream/elephant.greek.srt" category="SUB"></itext>
- <itext id="video_he" lang="he" type="text/srt" charset="Windows-1252" display="auto"
- src="elephants_dream/elephant.hebrew.srt" category="SUB"></itext>
- <itext id="video_hu" lang="hu" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.hungarian-utf8.srt" category="SUB"></itext>
- <itext id="video_it" lang="it" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.italian.srt" category="SUB"></itext>
- <itext id="video_ja" lang="ja" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.japanese.srt" category="CC"></itext>
- <itext id="video_ja" lang="ja" type="text/srt" charset="EUC-JP" display="auto"
- src="elephants_dream/elephant.japanese-euc.srt" category="CC"></itext>
- <itext id="video_mt" lang="mt" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.maltese_utf8.srt" category="CC"></itext>
- <itext id="video_nn" lang="nn" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.norwegian.srt" category="CC"></itext>
- <itext id="video_pl" lang="pl" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.polish.srt" category="CC"></itext>
- <itext id="video_pt" lang="pt" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.portuguese.srt" category="CC"></itext>
- <itext id="video_pt_br" lang="pt-br" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.brazilian.srt" category="CC"></itext>
- <itext id="video_ro" lang="ro" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.romanian.srt" category="CC"></itext>
- <itext id="video_ru" lang="ru" type="text/srt" charset="Windows-1251" display="auto"
- src="elephants_dream/elephant.russian.srt" category="CC"></itext>
- <itext id="video_sl" lang="sl" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.slovenian.srt" category="CC"></itext>
- <itext id="video_es" lang="es" type="text/srt" charset="ISO-8859" display="auto"
- src="elephants_dream/elephant.spanish.srt" category="CC"></itext>
- <itext id="video_es_mx" lang="es-mx" type="text/srt" charset="ISO-8859" display="auto"
- src="elephants_dream/elephant.spanish-us.srt" category="CC"></itext>
- <itext id="video_sk" lang="sk" type="text/srt" charset="Windows-1251" display="auto"
- src="elephants_dream/elephant.slovak.srt" category="CC"></itext>
- <itext id="video_sv" lang="sv" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.swedish.srt" category="CC"></itext>
- <itext id="audiodesc" lang="en" type="text/srt" charset="ISO-8859" display="yes"
- src="elephants_dream/audiodescription.srt" category="TAD"></itext>
- <itext id="chapters" lang="en" type="text/srt" charset="ISO-8859" display="yes"
- src="elephants_dream/chapters.srt" category="CUE"></itext>
- </video>
-
- </div></div></div>
- <div class="sw"><div class="se"><div class="sc">
- <a class="play btn" href="#play" aria-live="off">
- <img src="skins/schmucker/images/button_play.png" alt="video play button"/>
- </a>
- <a class="stop btn" href="#stop" aria-live="off">
- <img src="skins/schmucker/images/button_stop.png" alt="video stop button"/>
- </a>
- <div class="seeker bar">
-
- <div class="fill">
- <div class="progress"></div>
- <div class="limiter">
- <div class="handle"></div>
- </div>
- <div class="w"></div><div class="e"></div>
- </div>
- </div>
- <a class="sound btn" href="#sound"><img class="soundimg" aria-live="off" src="skins/schmucker/images/sound.png" alt="video volume" /></a>
- <a class="itext btn" href="#itext"><img class="itextimg" aria-live="off" src="skins/schmucker/images/itext.png" alt="Access Subtitles, Captions and Audio Descriptions - press space bar"/></a>
-
- <div class="volume bar">
- <div class="fill">
- <div class="progress"></div>
- <div class="w"></div><div class="e"></div>
- </div>
- </div>
- <div class="size"></div>
- </div></div></div>
- </div>
-
-</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>
-
-<h1>Experiment description</h1>
-
-<p>This is a demo of video accessibility. Features:</p>
-<ul>
- <li>contains four different types of time-aligned text: subtitles, captions, chapters, and textual audio annotations</li>
- <li>extends the video controls with a menu button for the time-aligned text tracks which enables the user to switch between different languages for the different tracks</li>
- <li>the textual audio annotations are mapped into an aria-live activated div element, such that they are indeed read out by screen-readers; this div sits behind the video, invisible to everyone else</li>
- <li>the chapters are displayed as text on top of the video</li>
- <li>the subtitles and captions are displayed as overlays at the bottom of the video</li>
- <li>these three display mechanisms are supposed to be default display mechanisms for these kinds of tracks, that could be overwritten by the stylesheet of a Web developer, who intends to place the text elsewhere on screen</li>
-</ul>
-
-<p>The main elements of this Web page are:</p>
-<pre>
- <video class="v" src="elephants_dream/elephant.ogv" poster="elephants_dream/elephant.png" >
-
- <itext id="video_af" lang="af" type="text/srt" charset="ISO-8859" display="auto"
- src="elephants_dream/elephant.afrikaans.srt" category="SUB"></itext>
- <itext id="video_ar" lang="ar" type="text/srt" charset="Windows-1256" display="auto"
- src="elephants_dream/elephant.arabic.srt" category="SUB"></itext>
- <itext id="video_bn" lang="bn" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.bangla.srt" category="SUB"></itext>
- <itext id="video_br" lang="br" type="text/srt" charset="Windows-1252" display="auto"
- src="elephants_dream/elephant.breton.srt" category="SUB"></itext>
- <itext id="video_bg" lang="bg" type="text/srt" charset="Windows-1251" display="auto"
- src="elephants_dream/elephant.bulgarian.srt" category="SUB"></itext>
- <itext id="video_ca" lang="ca" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.catalan-utf8.srt" category="SUB"></itext>
- <itext id="video_zh" lang="zh" type="text/srt" charset="GB18030" display="auto"
- src="elephants_dream/elephant.chinese.srt" category="SUB"></itext>
- <itext id="video_cz" lang="cs" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.czech.srt" category="SUB"></itext>
- <itext id="video_da" lang="da" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.danish.srt" category="SUB"></itext>
- <itext id="video_nl" lang="nl" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.dutch.srt" category="SUB"></itext>
- <itext id="video_en" lang="en" type="text/srt" charset="ISO-8859" display="auto"
- src="elephants_dream/elephant.english.srt" category="SUB"></itext>
- <itext id="video_et" lang="et" type="text/srt" charset="Windows-1252" display="auto"
- src="elephants_dream/elephant.estonian.srt" category="SUB"></itext>
- <itext id="video_fi" lang="fi" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.finnish.srt" category="SUB"></itext>
- <itext id="video_fr" lang="fr" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.french.srt" category="SUB"></itext>
- <itext id="video_de" lang="de" type="text/srt" charset="ISO-8859" display="auto"
- src="elephants_dream/elephant.german.srt" category="SUB"></itext>
- <itext id="video_el" lang="el" type="text/srt" charset="ISO-8859-7" display="auto"
- src="elephants_dream/elephant.greek.srt" category="SUB"></itext>
- <itext id="video_he" lang="he" type="text/srt" charset="Windows-1252" display="auto"
- src="elephants_dream/elephant.hebrew.srt" category="SUB"></itext>
- <itext id="video_hu" lang="hu" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.hungarian-utf8.srt" category="SUB"></itext>
- <itext id="video_it" lang="it" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.italian.srt" category="SUB"></itext>
-
- <itext id="video_ja" lang="ja" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.japanese.srt" category="CC"></itext>
- <itext id="video_ja" lang="ja" type="text/srt" charset="EUC-JP" display="auto"
- src="elephants_dream/elephant.japanese-euc.srt" category="CC"></itext>
- <itext id="video_mt" lang="mt" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.maltese_utf8.srt" category="CC"></itext>
- <itext id="video_nn" lang="nn" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.norwegian.srt" category="CC"></itext>
- <itext id="video_pl" lang="pl" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.polish.srt" category="CC"></itext>
- <itext id="video_pt" lang="pt" type="text/srt" charset="UTF-8" display="auto"
- src="elephants_dream/elephant.portuguese.srt" category="CC"></itext>
- <itext id="video_pt_br" lang="pt-br" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.brazilian.srt" category="CC"></itext>
- <itext id="video_ro" lang="ro" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.romanian.srt" category="CC"></itext>
- <itext id="video_ru" lang="ru" type="text/srt" charset="Windows-1251" display="auto"
- src="elephants_dream/elephant.russian.srt" category="CC"></itext>
- <itext id="video_sl" lang="sl" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.slovenian.srt" category="CC"></itext>
- <itext id="video_es" lang="es" type="text/srt" charset="ISO-8859" display="auto"
- src="elephants_dream/elephant.spanish.srt" category="CC"></itext>
- <itext id="video_es_mx" lang="es-mx" type="text/srt" charset="ISO-8859" display="auto"
- src="elephants_dream/elephant.spanish-us.srt" category="CC"></itext>
- <itext id="video_sk" lang="sk" type="text/srt" charset="Windows-1251" display="auto"
- src="elephants_dream/elephant.slovak.srt" category="CC"></itext>
- <itext id="video_sv" lang="sv" type="text/srt" charset="ISO-8859-1" display="auto"
- src="elephants_dream/elephant.swedish.srt" category="CC"></itext>
-
- <itext id="audiodesc" lang="en" type="text/srt" charset="ISO-8859" display="yes"
- src="elephants_dream/audiodescription.srt" category="TAD"></itext>
-
- <itext id="chapters" lang="en" type="text/srt" charset="ISO-8859" display="yes"
- src="elephants_dream/chapters.srt" category="CUE"></itext>
-
-</video>
-</pre>
-
-<h1>Credits</h1>
-
-<p>The demo was created by Silvia Pfeiffer <a href="https://wiki.mozilla.org/Accessibility/Experiment1_feedback">for Mozilla</a> to explore video accessibility approaches with the new HTML5 video tag.</p>
-
-<p>Thanks to Hans Schmucker for his <a href="http://www.tapper-ware.net/devel/js/JS.TinyVidPlayer/index.xhtml">video player skin</a>.</p>
-
-<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>
-
- </body>
-</html>
Added: itext/elephant_no_skin.html
===================================================================
--- itext/elephant_no_skin.html (rev 0)
+++ itext/elephant_no_skin.html 2009-08-02 13:04:58 UTC (rev 3987)
@@ -0,0 +1,293 @@
+<!-- ***** 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 itext demonstration code.
+ -
+ - The Initial Developer of the Original Code is Mozilla Corporation.
+ - Portions created by the Initial Developer are Copyright (C) 2009
+ - 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 ***** -->
+
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <script type="text/javascript" src="javascript/jquery.js"></script>
+
+ <script type="text/javascript" src="javascript/srt.js"></script>
+ <script type="text/javascript" src="javascript/subtitles.js"></script>
+ <link href="styles/subtitles.css" type="text/css" rel="stylesheet"/>
+
+ <style>
+ div.itextMenu ul {
+ bottom: 0;
+ position: absolute;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ right: 0;
+ border: 1px;
+ z-index: 500;
+ }
+ </style>
+
+ <title>Experiment with video accessibility and time-aligned text</title>
+ </head>
+
+ <body>
+
+ <h1>Demo Video Player</h1>
+
+ <div class="mc" width="440px" height="300px" style="position: relative; display:inline-block;">
+ <div class="itextcontainer"></div>
+
+ <video class="v" src="elephants_dream/elephant.ogv" poster="elephants_dream/elephant.png" controls>
+ <!-- Language Tags http://www.iana.org/assignments/language-subtag-registry -->
+ <itext id="video_af" lang="af" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.afrikaans.srt" category="SUB"></itext>
+ <itext id="video_ar" lang="ar" type="text/srt" charset="Windows-1256" display="auto"
+ src="elephants_dream/elephant.arabic.srt" category="SUB"></itext>
+ <itext id="video_bn" lang="bn" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.bangla.srt" category="SUB"></itext>
+ <itext id="video_br" lang="br" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.breton.srt" category="SUB"></itext>
+ <itext id="video_bg" lang="bg" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.bulgarian.srt" category="SUB"></itext>
+ <itext id="video_ca" lang="ca" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.catalan-utf8.srt" category="SUB"></itext>
+ <itext id="video_zh" lang="zh" type="text/srt" charset="GB18030" display="auto"
+ src="elephants_dream/elephant.chinese.srt" category="SUB"></itext>
+ <itext id="video_cz" lang="cs" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.czech.srt" category="SUB"></itext>
+ <itext id="video_da" lang="da" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.danish.srt" category="SUB"></itext>
+ <itext id="video_nl" lang="nl" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.dutch.srt" category="SUB"></itext>
+ <itext id="video_en" lang="en" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.english.srt" category="SUB"></itext>
+ <itext id="video_et" lang="et" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.estonian.srt" category="SUB"></itext>
+ <itext id="video_fi" lang="fi" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.finnish.srt" category="SUB"></itext>
+ <itext id="video_fr" lang="fr" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.french.srt" category="SUB"></itext>
+ <itext id="video_de" lang="de" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.german.srt" category="SUB"></itext>
+ <itext id="video_el" lang="el" type="text/srt" charset="ISO-8859-7" display="auto"
+ src="elephants_dream/elephant.greek.srt" category="SUB"></itext>
+ <itext id="video_he" lang="he" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.hebrew.srt" category="SUB"></itext>
+ <itext id="video_hu" lang="hu" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.hungarian-utf8.srt" category="SUB"></itext>
+ <itext id="video_it" lang="it" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.italian.srt" category="SUB"></itext>
+ <itext id="video_ja" lang="ja" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.japanese.srt" category="CC"></itext>
+ <itext id="video_ja" lang="ja" type="text/srt" charset="EUC-JP" display="auto"
+ src="elephants_dream/elephant.japanese-euc.srt" category="CC"></itext>
+ <itext id="video_mt" lang="mt" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.maltese_utf8.srt" category="CC"></itext>
+ <itext id="video_nn" lang="nn" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.norwegian.srt" category="CC"></itext>
+ <itext id="video_pl" lang="pl" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.polish.srt" category="CC"></itext>
+ <itext id="video_pt" lang="pt" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.portuguese.srt" category="CC"></itext>
+ <itext id="video_pt_br" lang="pt-br" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.brazilian.srt" category="CC"></itext>
+ <itext id="video_ro" lang="ro" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.romanian.srt" category="CC"></itext>
+ <itext id="video_ru" lang="ru" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.russian.srt" category="CC"></itext>
+ <itext id="video_sl" lang="sl" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.slovenian.srt" category="CC"></itext>
+ <itext id="video_es" lang="es" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.spanish.srt" category="CC"></itext>
+ <itext id="video_es_mx" lang="es-mx" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.spanish-us.srt" category="CC"></itext>
+ <itext id="video_sk" lang="sk" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.slovak.srt" category="CC"></itext>
+ <itext id="video_sv" lang="sv" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.swedish.srt" category="CC"></itext>
+ <itext id="audiodesc" lang="en" type="text/srt" charset="ISO-8859" display="yes"
+ src="elephants_dream/audiodescription.srt" category="TAD"></itext>
+ <itext id="chapters" lang="en" type="text/srt" charset="ISO-8859" display="yes"
+ src="elephants_dream/chapters.srt" category="CUE"></itext>
+ </video>
+
+<div id="menu"></div>
+
+</div>
+</div>
+
+<a id="itext_btn" href="#itext"><img class="itextimg" aria-live="off" src="skins/schmucker/images/itext.png" alt="Access Subtitles, Captions and Audio Descriptions - press space bar" style="background-color:black;"/></a>
+
+
+<script type="text/javascript">
+ // get video element
+ var video = document.getElementsByTagName("video")[0];
+
+ // parse itexts and create an invisible menu for them
+ var itexts=new ItextCollection(jQuery(video));
+ itexts.itextMenu(jQuery("#menu"), "window");
+
+ // set callback for video
+ video.addEventListener("timeupdate", function() {
+ if (video.paused || video.ended) {
+ return;
+ }
+ itexts.show(self.video.currentTime);
+ }, false);
+
+ // get itext button
+ var itext_btn = document.getElementById("itext_btn");
+ var visitext = false;
+ // hook up event listener to itext button
+ itext_btn.addEventListener("mouseover", function() {
+ visitext=!visitext;
+ if (visitext) {
+ // make subtitle menu visible
+ jQuery(".catMenu").css("visibility", "visible");
+ jQuery(".catMenu").css("bottom", "20px");
+ jQuery(".catMenu").css("right", "-38px");
+
+ } else {
+ // make subtitle menu invisible
+ jQuery(".catMenu").css("visibility", "hidden");
+ }
+ }
+
+ ,false);
+
+</script>
+
+<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>
+
+<h1>Experiment description</h1>
+
+<p>This is a demo of video accessibility. Features:</p>
+<ul>
+ <li>contains four different types of time-aligned text: subtitles, captions, chapters, and textual audio annotations</li>
+ <li>extends the video controls with a menu button for the time-aligned text tracks which enables the user to switch between different languages for the different tracks</li>
+ <li>the textual audio annotations are mapped into an aria-live activated div element, such that they are indeed read out by screen-readers; this div sits behind the video, invisible to everyone else</li>
+ <li>the chapters are displayed as text on top of the video</li>
+ <li>the subtitles and captions are displayed as overlays at the bottom of the video</li>
+ <li>these three display mechanisms are supposed to be default display mechanisms for these kinds of tracks, that could be overwritten by the stylesheet of a Web developer, who intends to place the text elsewhere on screen</li>
+</ul>
+
+<p>The main elements of this Web page are:</p>
+<pre>
+ <video class="v" src="elephants_dream/elephant.ogv" poster="elephants_dream/elephant.png" >
+
+ <itext id="video_af" lang="af" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.afrikaans.srt" category="SUB"></itext>
+ <itext id="video_ar" lang="ar" type="text/srt" charset="Windows-1256" display="auto"
+ src="elephants_dream/elephant.arabic.srt" category="SUB"></itext>
+ <itext id="video_bn" lang="bn" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.bangla.srt" category="SUB"></itext>
+ <itext id="video_br" lang="br" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.breton.srt" category="SUB"></itext>
+ <itext id="video_bg" lang="bg" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.bulgarian.srt" category="SUB"></itext>
+ <itext id="video_ca" lang="ca" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.catalan-utf8.srt" category="SUB"></itext>
+ <itext id="video_zh" lang="zh" type="text/srt" charset="GB18030" display="auto"
+ src="elephants_dream/elephant.chinese.srt" category="SUB"></itext>
+ <itext id="video_cz" lang="cs" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.czech.srt" category="SUB"></itext>
+ <itext id="video_da" lang="da" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.danish.srt" category="SUB"></itext>
+ <itext id="video_nl" lang="nl" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.dutch.srt" category="SUB"></itext>
+ <itext id="video_en" lang="en" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.english.srt" category="SUB"></itext>
+ <itext id="video_et" lang="et" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.estonian.srt" category="SUB"></itext>
+ <itext id="video_fi" lang="fi" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.finnish.srt" category="SUB"></itext>
+ <itext id="video_fr" lang="fr" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.french.srt" category="SUB"></itext>
+ <itext id="video_de" lang="de" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.german.srt" category="SUB"></itext>
+ <itext id="video_el" lang="el" type="text/srt" charset="ISO-8859-7" display="auto"
+ src="elephants_dream/elephant.greek.srt" category="SUB"></itext>
+ <itext id="video_he" lang="he" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.hebrew.srt" category="SUB"></itext>
+ <itext id="video_hu" lang="hu" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.hungarian-utf8.srt" category="SUB"></itext>
+ <itext id="video_it" lang="it" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.italian.srt" category="SUB"></itext>
+
+ <itext id="video_ja" lang="ja" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.japanese.srt" category="CC"></itext>
+ <itext id="video_ja" lang="ja" type="text/srt" charset="EUC-JP" display="auto"
+ src="elephants_dream/elephant.japanese-euc.srt" category="CC"></itext>
+ <itext id="video_mt" lang="mt" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.maltese_utf8.srt" category="CC"></itext>
+ <itext id="video_nn" lang="nn" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.norwegian.srt" category="CC"></itext>
+ <itext id="video_pl" lang="pl" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.polish.srt" category="CC"></itext>
+ <itext id="video_pt" lang="pt" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.portuguese.srt" category="CC"></itext>
+ <itext id="video_pt_br" lang="pt-br" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.brazilian.srt" category="CC"></itext>
+ <itext id="video_ro" lang="ro" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.romanian.srt" category="CC"></itext>
+ <itext id="video_ru" lang="ru" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.russian.srt" category="CC"></itext>
+ <itext id="video_sl" lang="sl" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.slovenian.srt" category="CC"></itext>
+ <itext id="video_es" lang="es" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.spanish.srt" category="CC"></itext>
+ <itext id="video_es_mx" lang="es-mx" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.spanish-us.srt" category="CC"></itext>
+ <itext id="video_sk" lang="sk" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.slovak.srt" category="CC"></itext>
+ <itext id="video_sv" lang="sv" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.swedish.srt" category="CC"></itext>
+
+ <itext id="audiodesc" lang="en" type="text/srt" charset="ISO-8859" display="yes"
+ src="elephants_dream/audiodescription.srt" category="TAD"></itext>
+
+ <itext id="chapters" lang="en" type="text/srt" charset="ISO-8859" display="yes"
+ src="elephants_dream/chapters.srt" category="CUE"></itext>
+
+</video>
+</pre>
+
+<h1>Credits</h1>
+
+<p>The demo was created by Silvia Pfeiffer <a href="https://wiki.mozilla.org/Accessibility/Experiment1_feedback">for Mozilla</a> to explore video accessibility approaches with the new HTML5 video tag.</p>
+
+<p>Thanks to Hans Schmucker for his <a href="http://www.tapper-ware.net/devel/js/JS.TinyVidPlayer/index.xhtml">video player skin</a>.</p>
+
+<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>
+
+ </body>
+</html>
Copied: itext/elephant_with_skin.html (from rev 3986, itext/elephant.html)
===================================================================
--- itext/elephant_with_skin.html (rev 0)
+++ itext/elephant_with_skin.html 2009-08-02 13:04:58 UTC (rev 3987)
@@ -0,0 +1,276 @@
+<!-- ***** 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 itext demonstration code.
+ -
+ - The Initial Developer of the Original Code is Mozilla Corporation.
+ - Portions created by the Initial Developer are Copyright (C) 2009
+ - 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 ***** -->
+
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <script type="text/javascript" src="javascript/jquery.js"></script>
+
+ <script type="text/javascript" src="javascript/srt.js"></script>
+ <script type="text/javascript" src="javascript/subtitles.js"></script>
+ <link href="styles/subtitles.css" type="text/css" rel="stylesheet"/>
+
+ <script type="text/javascript" src="skins/schmucker/tinyvid.js"></script>
+ <link href="skins/schmucker/tinyvid.css" type="text/css" rel="stylesheet"/>
+
+ <title>Experiment with video accessibility and time-aligned text</title>
+ </head>
+
+ <body>
+
+ <h1>Demo Video Player</h1>
+
+ <div id="main">
+ <div class="tinyVidPlayer">
+
+ <div class="nw"><div class="ne"><div class="nc">
+ </div></div></div>
+ <div class="mw"><div class="me"><div class="mc">
+
+ <div class="itextcontainer"></div>
+
+ <video class="v" src="elephants_dream/elephant.ogv" poster="elephants_dream/elephant.png" >
+ <!-- Language Tags http://www.iana.org/assignments/language-subtag-registry -->
+ <itext id="video_af" lang="af" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.afrikaans.srt" category="SUB"></itext>
+ <itext id="video_ar" lang="ar" type="text/srt" charset="Windows-1256" display="auto"
+ src="elephants_dream/elephant.arabic.srt" category="SUB"></itext>
+ <itext id="video_bn" lang="bn" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.bangla.srt" category="SUB"></itext>
+ <itext id="video_br" lang="br" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.breton.srt" category="SUB"></itext>
+ <itext id="video_bg" lang="bg" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.bulgarian.srt" category="SUB"></itext>
+ <itext id="video_ca" lang="ca" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.catalan-utf8.srt" category="SUB"></itext>
+ <itext id="video_zh" lang="zh" type="text/srt" charset="GB18030" display="auto"
+ src="elephants_dream/elephant.chinese.srt" category="SUB"></itext>
+ <itext id="video_cz" lang="cs" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.czech.srt" category="SUB"></itext>
+ <itext id="video_da" lang="da" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.danish.srt" category="SUB"></itext>
+ <itext id="video_nl" lang="nl" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.dutch.srt" category="SUB"></itext>
+ <itext id="video_en" lang="en" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.english.srt" category="SUB"></itext>
+ <itext id="video_et" lang="et" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.estonian.srt" category="SUB"></itext>
+ <itext id="video_fi" lang="fi" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.finnish.srt" category="SUB"></itext>
+ <itext id="video_fr" lang="fr" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.french.srt" category="SUB"></itext>
+ <itext id="video_de" lang="de" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.german.srt" category="SUB"></itext>
+ <itext id="video_el" lang="el" type="text/srt" charset="ISO-8859-7" display="auto"
+ src="elephants_dream/elephant.greek.srt" category="SUB"></itext>
+ <itext id="video_he" lang="he" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.hebrew.srt" category="SUB"></itext>
+ <itext id="video_hu" lang="hu" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.hungarian-utf8.srt" category="SUB"></itext>
+ <itext id="video_it" lang="it" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.italian.srt" category="SUB"></itext>
+ <itext id="video_ja" lang="ja" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.japanese.srt" category="CC"></itext>
+ <itext id="video_ja" lang="ja" type="text/srt" charset="EUC-JP" display="auto"
+ src="elephants_dream/elephant.japanese-euc.srt" category="CC"></itext>
+ <itext id="video_mt" lang="mt" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.maltese_utf8.srt" category="CC"></itext>
+ <itext id="video_nn" lang="nn" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.norwegian.srt" category="CC"></itext>
+ <itext id="video_pl" lang="pl" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.polish.srt" category="CC"></itext>
+ <itext id="video_pt" lang="pt" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.portuguese.srt" category="CC"></itext>
+ <itext id="video_pt_br" lang="pt-br" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.brazilian.srt" category="CC"></itext>
+ <itext id="video_ro" lang="ro" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.romanian.srt" category="CC"></itext>
+ <itext id="video_ru" lang="ru" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.russian.srt" category="CC"></itext>
+ <itext id="video_sl" lang="sl" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.slovenian.srt" category="CC"></itext>
+ <itext id="video_es" lang="es" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.spanish.srt" category="CC"></itext>
+ <itext id="video_es_mx" lang="es-mx" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.spanish-us.srt" category="CC"></itext>
+ <itext id="video_sk" lang="sk" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.slovak.srt" category="CC"></itext>
+ <itext id="video_sv" lang="sv" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.swedish.srt" category="CC"></itext>
+ <itext id="audiodesc" lang="en" type="text/srt" charset="ISO-8859" display="yes"
+ src="elephants_dream/audiodescription.srt" category="TAD"></itext>
+ <itext id="chapters" lang="en" type="text/srt" charset="ISO-8859" display="yes"
+ src="elephants_dream/chapters.srt" category="CUE"></itext>
+ </video>
+
+ </div></div></div>
+ <div class="sw"><div class="se"><div class="sc">
+ <a class="play btn" href="#play" aria-live="off">
+ <img src="skins/schmucker/images/button_play.png" alt="video play button"/>
+ </a>
+ <a class="stop btn" href="#stop" aria-live="off">
+ <img src="skins/schmucker/images/button_stop.png" alt="video stop button"/>
+ </a>
+ <div class="seeker bar">
+
+ <div class="fill">
+ <div class="progress"></div>
+ <div class="limiter">
+ <div class="handle"></div>
+ </div>
+ <div class="w"></div><div class="e"></div>
+ </div>
+ </div>
+ <a class="sound btn" href="#sound"><img class="soundimg" aria-live="off" src="skins/schmucker/images/sound.png" alt="video volume" /></a>
+ <a class="itext btn" href="#itext"><img class="itextimg" aria-live="off" src="skins/schmucker/images/itext.png" alt="Access Subtitles, Captions and Audio Descriptions - press space bar"/></a>
+
+ <div class="volume bar">
+ <div class="fill">
+ <div class="progress"></div>
+ <div class="w"></div><div class="e"></div>
+ </div>
+ </div>
+ <div class="size"></div>
+ </div></div></div>
+ </div>
+
+</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>
+
+<h1>Experiment description</h1>
+
+<p>This is a demo of video accessibility. Features:</p>
+<ul>
+ <li>contains four different types of time-aligned text: subtitles, captions, chapters, and textual audio annotations</li>
+ <li>extends the video controls with a menu button for the time-aligned text tracks which enables the user to switch between different languages for the different tracks</li>
+ <li>the textual audio annotations are mapped into an aria-live activated div element, such that they are indeed read out by screen-readers; this div sits behind the video, invisible to everyone else</li>
+ <li>the chapters are displayed as text on top of the video</li>
+ <li>the subtitles and captions are displayed as overlays at the bottom of the video</li>
+ <li>these three display mechanisms are supposed to be default display mechanisms for these kinds of tracks, that could be overwritten by the stylesheet of a Web developer, who intends to place the text elsewhere on screen</li>
+</ul>
+
+<p>The main elements of this Web page are:</p>
+<pre>
+ <video class="v" src="elephants_dream/elephant.ogv" poster="elephants_dream/elephant.png" >
+
+ <itext id="video_af" lang="af" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.afrikaans.srt" category="SUB"></itext>
+ <itext id="video_ar" lang="ar" type="text/srt" charset="Windows-1256" display="auto"
+ src="elephants_dream/elephant.arabic.srt" category="SUB"></itext>
+ <itext id="video_bn" lang="bn" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.bangla.srt" category="SUB"></itext>
+ <itext id="video_br" lang="br" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.breton.srt" category="SUB"></itext>
+ <itext id="video_bg" lang="bg" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.bulgarian.srt" category="SUB"></itext>
+ <itext id="video_ca" lang="ca" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.catalan-utf8.srt" category="SUB"></itext>
+ <itext id="video_zh" lang="zh" type="text/srt" charset="GB18030" display="auto"
+ src="elephants_dream/elephant.chinese.srt" category="SUB"></itext>
+ <itext id="video_cz" lang="cs" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.czech.srt" category="SUB"></itext>
+ <itext id="video_da" lang="da" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.danish.srt" category="SUB"></itext>
+ <itext id="video_nl" lang="nl" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.dutch.srt" category="SUB"></itext>
+ <itext id="video_en" lang="en" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.english.srt" category="SUB"></itext>
+ <itext id="video_et" lang="et" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.estonian.srt" category="SUB"></itext>
+ <itext id="video_fi" lang="fi" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.finnish.srt" category="SUB"></itext>
+ <itext id="video_fr" lang="fr" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.french.srt" category="SUB"></itext>
+ <itext id="video_de" lang="de" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.german.srt" category="SUB"></itext>
+ <itext id="video_el" lang="el" type="text/srt" charset="ISO-8859-7" display="auto"
+ src="elephants_dream/elephant.greek.srt" category="SUB"></itext>
+ <itext id="video_he" lang="he" type="text/srt" charset="Windows-1252" display="auto"
+ src="elephants_dream/elephant.hebrew.srt" category="SUB"></itext>
+ <itext id="video_hu" lang="hu" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.hungarian-utf8.srt" category="SUB"></itext>
+ <itext id="video_it" lang="it" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.italian.srt" category="SUB"></itext>
+
+ <itext id="video_ja" lang="ja" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.japanese.srt" category="CC"></itext>
+ <itext id="video_ja" lang="ja" type="text/srt" charset="EUC-JP" display="auto"
+ src="elephants_dream/elephant.japanese-euc.srt" category="CC"></itext>
+ <itext id="video_mt" lang="mt" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.maltese_utf8.srt" category="CC"></itext>
+ <itext id="video_nn" lang="nn" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.norwegian.srt" category="CC"></itext>
+ <itext id="video_pl" lang="pl" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.polish.srt" category="CC"></itext>
+ <itext id="video_pt" lang="pt" type="text/srt" charset="UTF-8" display="auto"
+ src="elephants_dream/elephant.portuguese.srt" category="CC"></itext>
+ <itext id="video_pt_br" lang="pt-br" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.brazilian.srt" category="CC"></itext>
+ <itext id="video_ro" lang="ro" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.romanian.srt" category="CC"></itext>
+ <itext id="video_ru" lang="ru" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.russian.srt" category="CC"></itext>
+ <itext id="video_sl" lang="sl" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.slovenian.srt" category="CC"></itext>
+ <itext id="video_es" lang="es" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.spanish.srt" category="CC"></itext>
+ <itext id="video_es_mx" lang="es-mx" type="text/srt" charset="ISO-8859" display="auto"
+ src="elephants_dream/elephant.spanish-us.srt" category="CC"></itext>
+ <itext id="video_sk" lang="sk" type="text/srt" charset="Windows-1251" display="auto"
+ src="elephants_dream/elephant.slovak.srt" category="CC"></itext>
+ <itext id="video_sv" lang="sv" type="text/srt" charset="ISO-8859-1" display="auto"
+ src="elephants_dream/elephant.swedish.srt" category="CC"></itext>
+
+ <itext id="audiodesc" lang="en" type="text/srt" charset="ISO-8859" display="yes"
+ src="elephants_dream/audiodescription.srt" category="TAD"></itext>
+
+ <itext id="chapters" lang="en" type="text/srt" charset="ISO-8859" display="yes"
+ src="elephants_dream/chapters.srt" category="CUE"></itext>
+
+</video>
+</pre>
+
+<h1>Credits</h1>
+
+<p>The demo was created by Silvia Pfeiffer <a href="https://wiki.mozilla.org/Accessibility/Experiment1_feedback">for Mozilla</a> to explore video accessibility approaches with the new HTML5 video tag.</p>
+
+<p>Thanks to Hans Schmucker for his <a href="http://www.tapper-ware.net/devel/js/JS.TinyVidPlayer/index.xhtml">video player skin</a>.</p>
+
+<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>
+
+ </body>
+</html>
Modified: itext/index.html
===================================================================
--- itext/index.html 2009-08-01 23:39:19 UTC (rev 3986)
+++ itext/index.html 2009-08-02 13:04:58 UTC (rev 3987)
@@ -169,7 +169,7 @@
</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 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>
<h1>Experiment description</h1>
Modified: itext/javascript/subtitles.js
===================================================================
--- itext/javascript/subtitles.js 2009-08-01 23:39:19 UTC (rev 3986)
+++ itext/javascript/subtitles.js 2009-08-02 13:04:58 UTC (rev 3987)
@@ -550,14 +550,14 @@
// double assoc array is created
this.tracks = categories;
},
- itextMenu: function (baseEl) {
+ itextMenu: function (baseEl, elstring) {
var appendText = '<div class="itextMenu">\n';
appendText += '<ul class="catMenu">\n';
for (var i in this.tracks) {
appendText += '<li> < ' + categoryName(i) + '\n';
appendText += '<ul class="langMenu">\n';
for (var j in this.tracks[i]) {
- appendText += '<li><a href="#" onclick="playerControllers[0].itexts.tracks[\'' + i + '\'][\'' + j + '\'].enable();jQuery(\'.catMenu\').css(\'visibility\', \'hidden\');return false;">' + this.tracks[i][j].langName + '</a></li>\n';
+ appendText += '<li><a href="#" onclick="'+elstring+'.itexts.tracks[\'' + i + '\'][\'' + j + '\'].enable();jQuery(\'.catMenu\').css(\'visibility\', \'hidden\');return false;">' + this.tracks[i][j].langName + '</a></li>\n';
}
appendText += '</ul>\n</li>\n';
}
Modified: itext/skins/schmucker/tinyvid.js
===================================================================
--- itext/skins/schmucker/tinyvid.js 2009-08-01 23:39:19 UTC (rev 3986)
+++ itext/skins/schmucker/tinyvid.js 2009-08-02 13:04:58 UTC (rev 3987)
@@ -207,7 +207,7 @@
// parse itexts and create an invisible menu for them
this.itexts=new ItextCollection(jQuery(this.video));
- this.itexts.itextMenu(jQuery(".mc"));
+ this.itexts.itextMenu(jQuery(".mc"), "playerControllers[0]");
this.visitext = false;
// attach a callback to the video for the captions
More information about the commits
mailing list