mozilla
/
popcorn-js
зеркало из https://github.com/mozilla/popcorn-js.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Removed broken demo

This commit is contained in:
David Seifried 2011-09-13 15:42:13 -04:00
Родитель fbd89af67d
Коммит 00faeda0f5
4 изменённых файлов: 0 добавлений и 257 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

86
demos/popcorn/index.html
Просмотреть файл

@ -1,86 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../../popcorn.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- This is needed for google maps api -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- These two are needed for google news api -->
<script src="http://google.com/jsapi"></script>
<script>google.load("elements", "1", {packages : ["newsshow"]});</script>
<!-- This is needed for language translation -->
<script>google.load("language", "1");</script>
</head>
<body>
<!-- Start Contents -->
<div id="contents">
<!-- Start Left Contents -->
<div class="left-content">
<!-- Start Video Div -->
<br />
<div id="videoContainer" class="video-div">
<video src="http://scotland.proximity.on.ca/sdowne/popcornIntroDemo/demo.ogg" data-timeline-sources="xml/data.xml" style="-moz-transform: scaleX(1.2); height:300px;" controls></video>
<div id="translateinfo"style="z-index:2;position:absolute;color:white;textShadow:black 2px 2px 6px;font-size:18px;font-family:arial;max-width:480px;font-weight:bold;top: 230px;left:-20px"></div>
<div id="translateinfofrench" style="z-index:2;position:absolute;color:white;textShadow:black 2px 2px 6px;font-style:italic;font-family:arial;max-width:480px;font-size:18px;font-weight:bold;top:260px;left:-20px"></div>
</div>
<div class="video-info" style="display:none">
<!-- Start Choose Language -->
<div class="choose-language">
<h2>Choose your language</h2>
<select id="language">
<option value="zh">Chinese</option>
<option value="fr" selected="selected">French</option>
<option value="de">German</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="fa">Persian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="es">Spanish</option>
</select>
<span id="credit">
with help from
<a href="http://google.com/translate">Google Translate</a> and <a href="http://jquery.com">
jQuery</a>
</span>
</div>
<!-- End Choose Language -->
</div>
<!-- End Video Info -->
<div id="attribinfo" style="display:none;background:white;width:409px;height:100px;text-align:left;padding-left:4px;"></div>
</div><br />
</div><!-- End Video Div -->
<div class="right-content">
<h1>Google Maps</h1>
<div id="mapinfo" style="width:400px;height:250px" ></div>
<div id="imageinfo" style="display:none;top:330px;width:400px;text-align:left;"> <!--needed for imageCommand -->
<h1>Popcorn-js Team</h1>
</div>
<div id="wikiinfo" style="display:none;top:330px;background:black;color:white;width:400px;height:220px;text-align:left;padding-left:4px;position:absolute;">
<h1>Wikipedia</h1><br>
</div>
<div id="flickrinfo" style="display:none;top:330px;color:white;background:black;width:400px;height:220px;text-align:left;position:absolute">
<h1>Flickr</h1>
</div>
<div id="twitterinfo" style="display:none;top:330px;color:white;background:white;width:400px;height:100px;text-align:left;align:left">
<br />
</div>
</div>
<br />
<div class="full-content">
<div id="iframeinfo"></div>
<div id="iframeinfo"></div>
</div>
</div>
</body>
</html>

95
demos/popcorn/style.css
Просмотреть файл

@ -1,95 +0,0 @@
html, body{
height: 100%;
}
body {
line-height: 1;
font-family: Helvetica, Arial, "Lucida Grande";
font-size: 15px;
}
a{
text-decoration: none;
color: #cc433d;
}
a:hover{
color: #f27c77;
}
/* Layout */
body{
background-color: #000000;
}
.left-content{
width:520px;
float: left;
padding-left:20px
}
.right-content{
float: left;
width:400px;
padding-left:0px;
padding-top: 0px;
}
.full-content{
width:960px;
padding-left:20px;
}
.video-div{
position:relative;
border-style: "groove";
margin-bottom: 20px;
margin-right: 20px;
margin-left: 45px;
clear: both;
font-size: 15px !important;
}
h1{
border: 1px solid #9f9f9f;
background-color:#1c749d;
-moz-border-radius:8px;
border-radius:8px;
-webkit-border-radius:8px;
background-image: -moz-linear-gradient(top, #3d96c0, #1a729b);/* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1a729b),color-stop(1, #3d96c0));/* Safari & Chrome */
padding: 5px 20px 6px 12px;
min-width:365px;
font-size:15px;
color: #FFF;
font-weight: normal;
display: inline-block;
border-bottom-color: #1c749d;
/*box-shadow:inset 0 0 1px #FFF;
-moz-box-shadow:inset 0 1px 0 #6fb9db;*/
}
.choose-language h2, .choose-language div{
color: #FFF;
opacity:.8;
}
.choose-language h2{
font-size: 12px;
padding-bottom: 3px;
}
.choose-language a{
font-weight: bold;
color: #FFF;
text-decoration: underline;
}
.choose-language a:hover{
opacity:1;
}
#credit{
padding: 5px 0;
font-size: 10px;
color: #FFF;
}
.choose-language select,.choose-language span, .choose-language select *{
color: #000;
font-size: 12px;
}

Двоичные данные
demos/popcorn/team.jpg
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 22 KiB

76
demos/popcorn/xml/data.xml
Просмотреть файл

@ -1,76 +0,0 @@
<popcorn>
<timeline>
<subtitles language="en" target="translateinfo">
<subtitle in="00:00:00:00" out="00:00:02:00">I am one of the lead developers of </subtitle>
<subtitle in="00:00:02:00" out="00:00:05:00">popcorn a JavaScript library that adds </subtitle>
<subtitle in="00:00:05:00" out="00:00:07:00">timeline based data to any video.</subtitle>
<subtitle in="00:00:08:00" out="00:00:09:00">I am going to show you what popcorn</subtitle>
<subtitle in="00:00:09:00" out="00:00:12:00">can do. Right now all you see is me</subtitle>
<subtitle in="00:00:12:00" out="00:00:14:00">talking on the screen you can’t really</subtitle>
<subtitle in="00:00:14:00" out="00:00:17:00">do anything but watch. Let’s make this </subtitle>
<subtitle in="00:00:17:00" out="00:00:19:00">video more exciting. Let me add </subtitle>
<subtitle in="00:00:19:00" out="00:00:22:00">some French subtitles. Popcorn uses</subtitle>
<subtitle in="00:00:22:00" out="00:00:24:00">Google Translate to translate subtitles</subtitle>
<subtitle in="00:00:24:00" out="00:00:27:00">to any language. You might be curious</subtitle>
<subtitle in="00:00:27:00" out="00:00:29:00">to know that this video was filmed in</subtitle>
<subtitle in="00:00:29:00" out="00:00:32:00">Toronto, Ontario. If you don’t know </subtitle>
<subtitle in="00:00:32:00" out="00:00:34:00">exactly where that is feel free to </subtitle>
<subtitle in="00:00:34:00" out="00:00:36:00">pause this video and investigate the</subtitle>
<subtitle in="00:00:36:00" out="00:00:39:00">map. Popcorn was built by five people,</subtitle>
<subtitle in="00:00:39:00" out="00:00:42:00">there they are. We collaborated with </subtitle>
<subtitle in="00:00:42:00" out="00:00:44:00">filmmakers and artists to ensure that</subtitle>
<subtitle in="00:00:44:00" out="00:00:47:00">popcorn is easy to use. Let me show</subtitle>
<subtitle in="00:00:47:00" out="00:00:49:00">you some other cool features. Keep in</subtitle>
<subtitle in="00:00:49:00" out="00:00:51:00">mind that you can have any feature </subtitle>
<subtitle in="00:00:51:00" out="00:00:54:00">appear and disappear at any time</subtitle>
<subtitle in="00:00:54:00" out="56.5">during the video. Popcorn makes it </subtitle>
<subtitle in="56.5" out="00:00:59:00">possible to pull data from twitter.</subtitle>
<subtitle in="00:00:59:00" out="00:01:01:00">Let’s see what people are saying </subtitle>
<subtitle in="00:01:01:00" out="00:01:02:00">about popcorn right now.</subtitle>
<subtitle in="00:01:03:00" out="00:01:04:00">You can also showcase your work </subtitle>
<subtitle in="00:01:04:00" out="00:01:07:00">by pulling data from a flicker account.</subtitle>
<subtitle in="00:01:07:00" out="00:01:09:00">Here are some pictures I posted.</subtitle>
<subtitle in="00:01:09:00" out="00:01:10:00">If you are not quite sure what</subtitle>
<subtitle in="00:01:10:00" out="00:01:12:00">Flicker is take a second to read</subtitle>
<subtitle in="00:01:12:00" out="00:01:15:00">about it on Wikipedia. To try</subtitle>
<subtitle in="00:01:15:00" out="00:01:17:00">out popcorn visit our homepage,</subtitle>
<subtitle in="00:01:17:00" >it is displayed just below me. </subtitle>
</subtitles>
<subtitles language="en" target="translateinfofrench" languagesrc="language">
<subtitle in="00:00:19:00" out="00:00:22:00">some French subtitles. Popcorn uses</subtitle>
<subtitle in="00:00:22:00" out="00:00:24:00">Google Translate to translate subtitles</subtitle>
<subtitle in="00:00:24:00" out="00:00:27:00">to any language. You might be curious</subtitle>
<subtitle in="00:00:27:00" out="00:00:29:00">to know that this video was filmed in</subtitle>
<subtitle in="00:00:29:00" out="00:00:32:00">Toronto, Ontario. If you don’t know </subtitle>
<subtitle in="00:00:32:00" out="00:00:34:00">exactly where that is feel free to </subtitle>
<subtitle in="00:00:34:00" out="00:00:36:00">pause this video and investigate the</subtitle>
<subtitle in="00:00:36:00" out="00:00:39:00">map. Popcorn was built by five people,</subtitle>
<subtitle in="00:00:39:00" out="00:00:42:00">there they are. We collaborated with </subtitle>
<subtitle in="00:00:42:00" out="00:00:44:00">filmmakers and artists to ensure that</subtitle>
<subtitle in="00:00:44:00" out="00:00:47:00">popcorn is easy to use. Let me show</subtitle>
<subtitle in="00:00:47:00" out="00:00:49:00">you some other cool features. Keep in</subtitle>
<subtitle in="00:00:49:00" out="00:00:51:00">mind that you can have any feature </subtitle>
<subtitle in="00:00:51:00" out="00:00:54:00">appear and disappear at any time</subtitle>
<subtitle in="00:00:54:00" out="56.5">during the video. Popcorn makes it </subtitle>
<subtitle in="56.5" out="00:00:59:00">possible to pull data from twitter.</subtitle>
<subtitle in="00:00:59:00" out="00:01:01:00">Let’s see what people are saying </subtitle>
<subtitle in="00:01:01:00" out="00:01:02:00">about popcorn right now.</subtitle>
<subtitle in="00:01:03:00" out="00:01:04:00">You can also showcase your work </subtitle>
<subtitle in="00:01:04:00" out="00:01:07:00">by pulling data from a flicker account.</subtitle>
<subtitle in="00:01:07:00" out="00:01:09:00">Here are some pictures I posted.</subtitle>
<subtitle in="00:01:09:00" out="00:01:10:00">If you are not quite sure what</subtitle>
<subtitle in="00:01:10:00" out="00:01:12:00">Flicker is take a second to read</subtitle>
<subtitle in="00:01:12:00" out="00:01:15:00">about it on Wikipedia. To try</subtitle>
<subtitle in="00:01:15:00" out="00:01:17:00">out popcorn visit our homepage,</subtitle>
<subtitle in="00:01:17:00" >it is displayed just below me. </subtitle>
</subtitles>
<location in="00:00:29:00" long="-79.403323" lat="43.665429" target="mapinfo" zoom="16"/>
<wiki in="00:01:12:00" out="00:01:15:00" src="http://en.wikipedia.org/wiki/Metadata" description="Metadata" numberOfWords="250" lang="en" target="wikiinfo"/>
<flickr in="00:01:06:00" out="00:01:10:00" target="flickrinfo" userid="54210095@N08" numberofimages="3" height="80" width="115" padding="8px"/>
<twitter in="00:00:59:00" out="00:01:05:00" title="&lt;b&gt;popcorn-js&lt;/b&gt;" source="popcorn-js" target="twitterinfo" width="400" height="120"/>
<image in="00:00:40:00" out="00:00:50:00" src="team.jpg" width="400" target="imageinfo"/>
<webpage in="00:01:15:00" target="iframeinfo" width="920" height="200" src="http://webmademovies.org" description="WebMadeMovies"></webpage>
</timeline>
</popcorn>