[xiph-commits] r4017 - in itext: . javascript
silvia at svn.annodex.net
silvia at svn.annodex.net
Wed Sep 16 01:50:09 PDT 2009
Author: silvia
Date: 2009-09-16 01:50:09 -0700 (Wed, 16 Sep 2009)
New Revision: 4017
Modified:
itext/
itext/chocolate_rain.html
itext/javascript/subtitles.js
Log:
Fixed some weird CSS bug that changed the width of the text elements when changing left offset.
I think it's a bug in Firefox's CSS model...
Added comments to explain the experiment.
Property changes on: itext
___________________________________________________________________
Modified: bzr:revision-info
- timestamp: 2009-09-16 15:03:53.638000011 +1000
committer: Silvia Pfeiffer <silvia.pfeiffer at vquence.com>
properties:
branch-nick: silvia
+ timestamp: 2009-09-16 15:40:39.594000101 +1000
committer: Silvia Pfeiffer <silvia.pfeiffer at vquence.com>
properties:
branch-nick: silvia
Modified: bzr:file-ids
- chocolate_rain.html chocolate_rain.html-20090914132633-q8uc7crdfdazkj8r-1
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
styles/subtitles.css subtitles.css-20090718094218-d45036mvytq5pecp-13
+ chocolate_rain.html chocolate_rain.html-20090914132633-q8uc7crdfdazkj8r-1
javascript/subtitles.js subtitles.js-20090718094218-d45036mvytq5pecp-10
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
36 silvia.pfeiffer at vquence.com-20090802130400-k998eftqulgcrp04
37 silvia.pfeiffer at vquence.com-20090802143005-c1sm52ru0kfed912
38 silvia.pfeiffer at vquence.com-20090827061919-ejpm51zs89ekbd56
39 silvia.pfeiffer at vquence.com-20090827061950-6fu26p80jdvdh50c
40 silvia.pfeiffer at vquence.com-20090901040002-3qs6tqiqcod3cda2
41 silvia.pfeiffer at vquence.com-20090901040227-o491w2qkp79a2a3r
42 silvia.pfeiffer at vquence.com-20090901040449-3xtimieabhw7fu7o
43 silvia.pfeiffer at vquence.com-20090901051757-h9l9753jy47x87zy
44 silvia.pfeiffer at vquence.com-20090901132958-3i65nroyeciazei3
45 silvia.pfeiffer at vquence.com-20090901230635-adfp1v5h24nvg30q
46 silvia.pfeiffer at vquence.com-20090902004049-ssqjbhtpz737oc90
47 silvia.pfeiffer at vquence.com-20090902022932-omg01n8yn6gg853c
48 silvia.pfeiffer at vquence.com-20090903010501-3vehjdbaxv2gyzzf
49 silvia.pfeiffer at vquence.com-20090912064418-3jw90gm7r0d2jjzk
50 silvia.pfeiffer at vquence.com-20090912065734-rx0kxsolg43lssa3
51 silvia.pfeiffer at vquence.com-20090912144329-yanfydw2pkoaxytw
52 silvia.pfeiffer at vquence.com-20090912152710-r2ga9oa451rmxgym
53 silvia.pfeiffer at vquence.com-20090912152945-l5voojx7ripnzono
54 silvia.pfeiffer at vquence.com-20090914014851-pt8aboskjyfhwecd
55 silvia.pfeiffer at vquence.com-20090914113345-t47n88dsqglme076
56 silvia.pfeiffer at vquence.com-20090914121706-2psey2lbp8tb70b6
57 silvia.pfeiffer at vquence.com-20090914121815-f09keijembthe6ug
58 silvia.pfeiffer at vquence.com-20090914124523-vlmi9jit1ztrgyu3
59 silvia.pfeiffer at vquence.com-20090914124902-2pcmkycne7fqfgv5
60 silvia.pfeiffer at vquence.com-20090914132553-o2ei9fl4706yjm1o
61 silvia.pfeiffer at vquence.com-20090914133103-hl9er0prbgvnht0w
62 silvia.pfeiffer at vquence.com-20090914134303-0jj8xyql5ixmd1ce
63 silvia.pfeiffer at vquence.com-20090914134859-gzoqbvy6hp73j2ij
64 silvia.pfeiffer at vquence.com-20090916050353-ulfo15y9sl4x03ep
+ 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
37 silvia.pfeiffer at vquence.com-20090802143005-c1sm52ru0kfed912
38 silvia.pfeiffer at vquence.com-20090827061919-ejpm51zs89ekbd56
39 silvia.pfeiffer at vquence.com-20090827061950-6fu26p80jdvdh50c
40 silvia.pfeiffer at vquence.com-20090901040002-3qs6tqiqcod3cda2
41 silvia.pfeiffer at vquence.com-20090901040227-o491w2qkp79a2a3r
42 silvia.pfeiffer at vquence.com-20090901040449-3xtimieabhw7fu7o
43 silvia.pfeiffer at vquence.com-20090901051757-h9l9753jy47x87zy
44 silvia.pfeiffer at vquence.com-20090901132958-3i65nroyeciazei3
45 silvia.pfeiffer at vquence.com-20090901230635-adfp1v5h24nvg30q
46 silvia.pfeiffer at vquence.com-20090902004049-ssqjbhtpz737oc90
47 silvia.pfeiffer at vquence.com-20090902022932-omg01n8yn6gg853c
48 silvia.pfeiffer at vquence.com-20090903010501-3vehjdbaxv2gyzzf
49 silvia.pfeiffer at vquence.com-20090912064418-3jw90gm7r0d2jjzk
50 silvia.pfeiffer at vquence.com-20090912065734-rx0kxsolg43lssa3
51 silvia.pfeiffer at vquence.com-20090912144329-yanfydw2pkoaxytw
52 silvia.pfeiffer at vquence.com-20090912152710-r2ga9oa451rmxgym
53 silvia.pfeiffer at vquence.com-20090912152945-l5voojx7ripnzono
54 silvia.pfeiffer at vquence.com-20090914014851-pt8aboskjyfhwecd
55 silvia.pfeiffer at vquence.com-20090914113345-t47n88dsqglme076
56 silvia.pfeiffer at vquence.com-20090914121706-2psey2lbp8tb70b6
57 silvia.pfeiffer at vquence.com-20090914121815-f09keijembthe6ug
58 silvia.pfeiffer at vquence.com-20090914124523-vlmi9jit1ztrgyu3
59 silvia.pfeiffer at vquence.com-20090914124902-2pcmkycne7fqfgv5
60 silvia.pfeiffer at vquence.com-20090914132553-o2ei9fl4706yjm1o
61 silvia.pfeiffer at vquence.com-20090914133103-hl9er0prbgvnht0w
62 silvia.pfeiffer at vquence.com-20090914134303-0jj8xyql5ixmd1ce
63 silvia.pfeiffer at vquence.com-20090914134859-gzoqbvy6hp73j2ij
64 silvia.pfeiffer at vquence.com-20090916050353-ulfo15y9sl4x03ep
65 silvia.pfeiffer at vquence.com-20090916054039-85bubhzxxxsnocce
Modified: bzr:text-parents
- elephant_no_skin.html silvia.pfeiffer at vquence.com-20090914132553-o2ei9fl4706yjm1o
elephant_with_skin.html silvia.pfeiffer at vquence.com-20090827061919-ejpm51zs89ekbd56
index.html silvia.pfeiffer at vquence.com-20090827061919-ejpm51zs89ekbd56
javascript/subtitles.js silvia.pfeiffer at vquence.com-20090914124902-2pcmkycne7fqfgv5
skins/schmucker/tinyvid.js silvia.pfeiffer at vquence.com-20090912144329-yanfydw2pkoaxytw
styles/subtitles.css silvia.pfeiffer at vquence.com-20090912144329-yanfydw2pkoaxytw
+
Modified: itext/chocolate_rain.html
===================================================================
--- itext/chocolate_rain.html 2009-09-16 05:04:47 UTC (rev 4016)
+++ itext/chocolate_rain.html 2009-09-16 08:50:09 UTC (rev 4017)
@@ -51,9 +51,11 @@
<h1>Demo Video and Audio Lyrics</h1>
- <div class="videocontainer" style="position: relative; display: inline-block;">
+
+ <div class="videocontainer" style="position: relative; display: inline-block; float: left;">
+ <p>A video element with subtitles:</p>
- <div class="mc" style="float: left;" width="320px">
+ <div class="mc" style="" width="320px">
<div id="itextcontainer1"></div>
<video class="v" src="chocolate_rain/chocolate_rain.ogv"
poster="chocolate_rain/chocolate_rain.png" controls aria-label="Chocolate Rain video"
@@ -65,9 +67,10 @@
</div>
- <div class="audiocontainer" style="position: relative; display: inline-block;">
+ <div class="audiocontainer" style="position: relative; display: inline-block; float: left; margin-left: 20px;">
+ <p>A audio element with lyrics:</p>
- <div class="mc" style="float: right;" width="320px">
+ <div class="mc" style="margin-top: 100px;" width="320px">
<div id="itextcontainer2"></div>
<audio class="a" src="chocolate_rain/chocolate_rain.ogg"
controls aria-label="Chocolate Rain song"
@@ -79,7 +82,10 @@
</div>
+ <div id="content" style="clear: both;">
+</div>
+
<script type="text/javascript">
// get video and audio element
var video = document.getElementsByTagName("video")[0];
@@ -109,7 +115,31 @@
<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>This is a demo of audio and video accessibility. Features:</p>
+<ul>
+ <li>contains subtitles for the video and lyrics for the audio, both using a file written in lrc format</li>
+ <li>the subtitles and lyrics are displayed as overlays for the video and audio elements into div elements that have been pre-defined for them</li>
+</ul>
+
+<p>The main elements of this Web page are:</p>
+<pre>
+ <video class="v" src="chocolate_rain/chocolate_rain.ogv"
+ poster="chocolate_rain/chocolate_rain.png" controls aria-label="Chocolate Rain video"
+ autobuffer title="Chocolate Rain video">
+ <itext id="lyrics" lang="en" type="text/lrc" display="yes"
+ src="chocolate_rain/chocolaterain.lrc" category="SUB"></itext>
+ </video>
+</pre>
+<pre>
+ <audio class="a" src="chocolate_rain/chocolate_rain.ogg"
+ controls aria-label="Chocolate Rain song"
+ autobuffer title="Chocolate Rain song">
+ <itext id="lyrics" lang="en" type="text/lrc" display="yes"
+ src="chocolate_rain/chocolaterain.lrc" category="LRC"></itext>
+ </audio>
+</pre>
+
<h2>Credits</h2>
<p>The demo was created by Silvia Pfeiffer <a href="https://wiki.mozilla.org/Accessibility/Experiment1_feedback">for Mozilla</a> to explore video and audio accessibility approaches with the new HTML5 video tag.</p>
Modified: itext/javascript/subtitles.js
===================================================================
--- itext/javascript/subtitles.js 2009-09-16 05:04:47 UTC (rev 4016)
+++ itext/javascript/subtitles.js 2009-09-16 08:50:09 UTC (rev 4017)
@@ -602,7 +602,6 @@
if (content[i]) {
// replace content of itext div
if (jQuery("#" + this.div_id + " > .itext_" + i).html() !== content[i]) {
-console.log(jQuery("#" + this.div_id + " > .itext_" + i + " > .text").css("width"));
jQuery("#" + this.div_id + " > .itext_" + i).html(content[i]);
if (i === "CUE") {
jQuery("#" + this.div_id + " > .itext_" + i + " > .text").prepend("Chapter: ");
@@ -615,8 +614,11 @@
if (i === "LRC") {
jQuery("#" + this.div_id + " > .itext_LRC").css("max-width", mc_width + "px");
jQuery("#" + this.div_id + " > .itext_LRC").css("bottom", "38px");
+ // somehow the setting of "left" encourages the correct width to be calculated
+ // if I don't do that, the width calculation in text_half_length is too short on some elements
+ jQuery("#" + this.div_id + " > .itext_" + i).css("left",5);
var text_half_length = jQuery("#" + this.div_id + " > .itext_LRC > .text").css("width").substr(0, jQuery("#" + this.div_id + " > .itext_LRC > .text").css("width").length - 2) / 2;
- jQuery("#" + this.div_id + " > .itext_LRC").css("left", ((mc_width / 2) - text_half_length - 14) + "px");
+ jQuery("#" + this.div_id + " > .itext_LRC").css("left", ((mc_width / 2) - text_half_length - 7) + "px");
}
jQuery("#" + this.div_id + " > .itext_" + i).css("visibility", "visible");
if (i === "CC" ||
@@ -625,15 +627,13 @@
i === "TRX" ||
i === "LIN") {
// anyone with a better idea for how to place the captions bottom center, please speak up
-// jQuery("#" + this.div_id + " > .itext_" + i).css("max-width", mc_width + "px");
+ jQuery("#" + this.div_id + " > .itext_" + i).css("max-width", mc_width + "px");
jQuery("#" + this.div_id + " > .itext_" + i).css("bottom", "23px");
+ // somehow the setting of "left" encourages the correct width to be calculated
+ // if I don't do that, the width calculation in text_half_length is too short on some elements
+ jQuery("#" + this.div_id + " > .itext_" + i).css("left",5);
var text_half_length = jQuery("#" + this.div_id + " > .itext_" + i + " > .text").css("width").substr(0, jQuery("#" + this.div_id + " > .itext_" + i + " > .text").css("width").length - 2) / 2;
-//console.log(text_half_length);
-//console.log(((mc_width / 2) - text_half_length - 7));
-console.log(jQuery("#" + this.div_id + " > .itext_" + i + " > .text").css("width"));
jQuery("#" + this.div_id + " > .itext_" + i).css("left", ((mc_width / 2) - text_half_length - 7) + "px");
-console.log("inside");
-console.log(jQuery("#" + this.div_id + " > .itext_" + i + " > .text").css("width"));
}
}
} else {
More information about the commits
mailing list