[xiph-commits] r18839 - in websites/xiph.org: css video
xiphmont at svn.xiph.org
xiphmont at svn.xiph.org
Mon Feb 25 22:58:03 PST 2013
Author: xiphmont
Date: 2013-02-25 22:58:03 -0800 (Mon, 25 Feb 2013)
New Revision: 18839
Added:
websites/xiph.org/video/02-Digital_Show_and_Tell.cb
websites/xiph.org/video/clickbox.js
Modified:
websites/xiph.org/css/videopage.css
websites/xiph.org/video/vid2.shtml
Log:
Add active clickbox scripting and config to vid2
Modified: websites/xiph.org/css/videopage.css
===================================================================
--- websites/xiph.org/css/videopage.css 2013-02-26 06:18:01 UTC (rev 18838)
+++ websites/xiph.org/css/videopage.css 2013-02-26 06:58:03 UTC (rev 18839)
@@ -192,3 +192,38 @@
background: #606060;
color: #e0e0e0;
}
+
+.cb {
+ position: absolute;
+ z-index: 1;
+ display: none;
+}
+
+.clickclass1 {
+ border-radius: 4px;
+ border-bottom: 1px solid #8c8cff;
+ border-right: 1px solid #8c8cff;
+ background-image: linear-gradient(to bottom,rgba(255,255,255,.05),rgba(255,255,255,.10));
+}
+
+.clickclass2 {
+ border-radius: 4px;
+ border-bottom: 1px solid #8c8cff;
+ border-right: 1px solid #8c8cff;
+ background-image: linear-gradient(to bottom,rgba(0,0,255,.05),rgba(0,0,255,.1));
+}
+
+.clickclass3 {
+ border-radius: 4px;
+ border-bottom: 1px solid #8c8cff;
+ border-right: 1px solid #8c8cff;
+ background-image: linear-gradient(to bottom,rgba(255,255,255,.10),rgba(255,255,255,.15));
+}
+
+.cbicon{
+ display: none;
+ position: absolute;
+ margin-top: -14px;
+ margin-left: -14px;
+ z-index: 2;
+}
\ No newline at end of file
Added: websites/xiph.org/video/02-Digital_Show_and_Tell.cb
===================================================================
--- websites/xiph.org/video/02-Digital_Show_and_Tell.cb (rev 0)
+++ websites/xiph.org/video/02-Digital_Show_and_Tell.cb 2013-02-26 06:58:03 UTC (rev 18839)
@@ -0,0 +1,22 @@
+1
+00:00:15.500 --> 00:00:20.000
+45 97 50 65 clickclass1
+http://xiph.org/
+
+2
+00:22:52.500 --> 00:22:56.600
+40 60 12 23 clickclass2
+http://www.wikipedia.org/
+
+3
+00:23:04.000 --> 00:23:08.800
+9 45 12 25 clickclass3
+http://ocw.mit.edu/resources/res-6-007-signals-and-systems-spring-2011/
+
+4
+00:23:29.000 --> 00:23:35.288
+50 94 28 52 clickclass2
+http://music.lousyrobot.com/track/andy-warhol-is-gone
+
+
+
Added: websites/xiph.org/video/clickbox.js
===================================================================
--- websites/xiph.org/video/clickbox.js (rev 0)
+++ websites/xiph.org/video/clickbox.js 2013-02-26 06:58:03 UTC (rev 18839)
@@ -0,0 +1,127 @@
+// piggybacks off subtitles.js
+
+var cbTimers = new Array();
+
+// 00:00:00.000 --> 00:00:00.000
+// left% right% top% bottom% #border #background
+// link
+
+function playClickboxes(boxElement,icon,vid) {
+ var cb = boxElement.text();
+ boxElement.text('');
+ cb = cb.replace(/\r\n|\r|\n/g, '\n');
+ var clickboxes = {};
+ cb = strip(cb);
+ var cb_ = cb.split('\n\n');
+
+ for(s in cb_) {
+ st = cb_[s].split('\n');
+ if(st.length >=2) {
+ n = st[0];
+
+ if(!(st[1].split(' --> ')[0]) ||
+ !(st[1].split(' --> ')[1]))
+ alert("Clickbox format error: "+st[1]);
+
+ if(!(st[2].split(' ')[0]) ||
+ !(st[2].split(' ')[1]) ||
+ !(st[2].split(' ')[2]) ||
+ !(st[2].split(' ')[3]) ||
+ !(st[2].split(' ')[4]))
+ alert("Clickbox format error: "+st[2]);
+
+ if(!(st[3]))
+ alert("Clickbox format error: "+st[3]);
+
+ i = strip(st[1].split(' --> ')[0]);
+ o = strip(st[1].split(' --> ')[1]);
+ left = strip(st[2].split(' ')[0]);
+ right = strip(st[2].split(' ')[1]);
+ topp = strip(st[2].split(' ')[2]);
+ bottom = strip(st[2].split(' ')[3]);
+ cl = strip(st[2].split(' ')[4]);
+ link = strip(st[3]);
+
+ is = toMilliSeconds(i);
+ os = toMilliSeconds(o);
+ clickboxes[is] = {o: os, l: left, r: right, t: topp, b: bottom, h: link, c: cl};
+ }
+ }
+ var current_clickbox = -1;
+ var current_opacity = 0;
+
+ cbTimers[boxElement] = setInterval(function() {
+ if(vid){
+ var currentTime = vid.currentTime;
+ var clickbox = -1;
+ for(s in clickboxes) {
+ if(s > currentTime*1000)
+ break;
+ clickbox = s;
+ }
+ if(clickbox > 0 && clickboxes[clickbox].o > currentTime*1000) {
+ if(current_clickbox != clickbox){
+ current_opacity = 0;
+ boxElement.height(clickboxes[clickbox].b - clickboxes[clickbox].t + "%");
+ boxElement.width(clickboxes[clickbox].r - clickboxes[clickbox].l + "%");
+ boxElement.css({"top": clickboxes[clickbox].t+"%", "left": clickboxes[clickbox].t+"%"});
+ boxElement.attr("href",clickboxes[clickbox].h);
+ boxElement.css({"top": clickboxes[clickbox].t+"%",
+ "left": clickboxes[clickbox].l+"%",
+ "display" : "block",
+ "opacity" : 0});
+ boxElement.removeClass().addClass("cb "+clickboxes[clickbox].c);
+ if(icon){
+ icon.css({"display" : "block",
+ "top": clickboxes[clickbox].b+"%",
+ "left": clickboxes[clickbox].r+"%"});
+ }
+ current_clickbox = clickbox;
+ }else{
+ if (current_opacity<1){
+ current_opacity+=.2;
+ boxElement.css({"opacity" : current_opacity});
+ }
+ }
+ }else{
+ if(current_clickbox != -1){
+ boxElement.css({"display" : "none"});
+ current_clickbox = -1;
+ current_opacity = 0;
+ if(icon){
+ icon.css({"display" : "none"});
+ }
+ }
+ }
+ }
+ }, 100);
+}
+
+function loadClickboxes(clickboxElement, url){
+ var el = $(clickboxElement);
+ var vid = findUnder(clickboxElement,'video');
+ var icon = findUnder(clickboxElement,'.cbicon');
+ if(cbTimers[el]){
+ clearInterval(cbTimers[el]);
+ cbTimers[el]=null;
+ el.html("");
+ }
+ if(url) {
+ el.load(url, function (responseText, textStatus, req) {playClickboxes(el,$(icon),vid)});
+ } else {
+ el.html("");
+ }
+}
+
+function SetClickboxes(el)
+{
+ if(el){
+ var file = $(el).attr("file");
+ if(file===undefined){
+ loadClickboxes(el);
+ }else{
+ loadClickboxes(el,file);
+ }
+ }
+}
+
Modified: websites/xiph.org/video/vid2.shtml
===================================================================
--- websites/xiph.org/video/vid2.shtml 2013-02-26 06:18:01 UTC (rev 18838)
+++ websites/xiph.org/video/vid2.shtml 2013-02-26 06:58:03 UTC (rev 18839)
@@ -40,7 +40,13 @@
<div class="srt"></div>
<div class="absbackground"></div>
</div>
-
+
+ <!-- Clickable overlay boxes -->
+ <div class="cbwrapper">
+ <a class="cb" file="02-Digital_Show_and_Tell.cb"></a>
+ <div class="cbicon"><img src="click.png"></div>
+ </div>
+
<!-- Addiitional upper video control bar (driven by javascript in video.js) -->
<div class="vcwrapper">
<div class="vidcontrols">
@@ -113,11 +119,10 @@
<div style="clear: both; font-size: 0px;"></div>
<div class="vid_caption">
- <p>
- Continuing the "firehose" tradition of maximum information density, Xiph.Org's
- second video on digital media explores multiple facets of digital
- audio signals and how they <i>really</i> behave in the real
- world.
+ <p> Continuing the "firehose" tradition of maximum information
+ density, Xiph.Org's second video on digital media explores
+ multiple facets of digital audio signals and how
+ they <i>really</i> behave in the real world.
</p>
<p>
Demonstrations of sampling, quantization, bit-depth, and dither
More information about the commits
mailing list