Confirm
4,467
edits
Changes
→First XML-based page
==First XML-based page==
To get something up quickly and see the power of Popcorn, you can try this example which uses an .xml file.
===Set formats in .htaccess===
Make sure that your .htaccess file on your server allows for the open video/audio formats by including:
<pre>
AddType audio/ogg .ogg
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
</pre>
===Create an index.html===
<pre>
<!DOCTYPE html>
<html>
<head>
<!-- Load popcorn.js and plugins you want to use -->
<script src="popcorn.js"></script>
<script src="plugins/wikipedia/popcorn.wikipedia.js"></script>
<script src="plugins/webpage/popcorn.webpage.js"></script>
<script src="plugins/googlemap/popcorn.googlemap.js"></script>
<script src="plugins/footnote/popcorn.footnote.js"></script>
<script src="plugins/twitter/popcorn.twitter.js"></script>
<script src="plugins/subtitle/popcorn.subtitle.js"></script>
<script src="plugins/googlenews/popcorn.googlenews.js"></script>
<script src="plugins/tagthisperson/popcorn.tagthisperson.js"></script>
<script src="plugins/wikipedia/popcorn.wikipedia.js"></script>
<script src="plugins/flickr/popcorn.flickr.js"></script>
<script src="plugins/attribution/popcorn.attribution.js"></script>
<!-- Need an XML parser -->
<script src="parsers/parserXML/popcorn.parseXML.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>
<title>Popcorn Video Demo</title>
</head>
<body>
<!-- Start Contents -->
<div id="contents">
<!-- Start Left Contents -->
<div class="left-content">
<!-- Start Video Div -->
<br />
<div id="videoContainer" class="video-div">
<!-- You have to have an id in the video tag for Popcorn to work -->
<video id="popcorn-this" src="my_video.ogg" data-timeline-sources="popcorn.xml" preload="auto" style="width:640px;" controls></video>
</div><!-- End Video Div -->
</div><!-- End Left Content -->
<!-- Start Right Content -->
<div class="right-content">
<h1>Popcorn Target</h1>
<div id="popcorn_box"></div>
</div><!-- End Right Content -->
</div><!-- End Contents -->
</body>
</html>
</pre>
===Style Sheet===
<pre>
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: #fff;
}
.left-content{
width:680px;
float: left;
padding-left:0px;
border: 1px dotted green;
}
.right-content{
float: left;
border: 1px dotted gray;
display: block;
width:400px;
padding-left:10px;
}
.full-content{
width:960px;
padding-left:0px;
}
.popcorn_box{
position:relative;
margin-bottom: 20px;
margin-right: 20px;
margin-left: 15px;
clear: both;
}
video {
border-radius: 12px;
border: 1px solid black;
}
.video-div{
position:relative;
margin-bottom: 20px;
margin-right: 20px;
margin-left: 15px;
clear: both;
}
.video-div span {
-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;
font-size:15px;
color: #FFF;
font-weight: normal;
display: block;
position: absolute;
/*box-shadow:inset 0 0 1px #FFF;
-moz-box-shadow:inset 0 1px 0 #6fb9db;*/
}
</pre>
===XML file===
<pre>
<popcorn>
<manifest>
<articles>
<resource id="bieber" src="http://en.wikipedia.org/wiki/Justin_Bieber" description="Beiber Wikipedia Article" lang="en"/>
<resource id="london" src="http://en.wikipedia.org/wiki/London,_Ontario" description="London, Ontario" lang="en"/>
</articles>
</manifest>
<timeline>
<resources>
<wikipedia in="00:00:01:01" out="00:00:06:00" resourceid="bieber" numberOfWords="350" target="popcorn_box"/>
<wikipedia in="00:00:06:30" out="00:00:11:00" resourceid="london" numberOfWords="350" target="popcorn_box"/>
</resources>
<footnotes>
<footnote in="00:00:01" out="00:09:00" target="popcorn_box"><p><a href="http://en.wikipedia.org/wiki/Justin_Bieber">Custom Text in a footnote</a></p></footnote>
</footnotes>
<twitter in="00:00:00:01" out="00:01:00:00" src="#justinbieber" title="Bieber Tweets" target="info_bubble"/>
</timeline>
</popcorn>
</pre>
Notes:
* you need to escape your html with entity tags in the footnote in order for it to work (CDATA might also work)
* check your xml syntax by going to the page in a browser and making sure it is being read properly, a tag that's not closed, or a character in footnotes can really mess you up
