130
edits
Changes
→First XML-based page
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- These two are needed for google news api -->
<script src="http://google.com/jsapi"></script>
* 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
==First JavaScript-based page==
Unlike the XML method, the JavaScript way of using popcorn does not require multiple pages.
===Create the landing page (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>
// ensure the DOM has loaded
document.addEventListener('DOMContentLoaded', function () {
// pass in the id of the video element below
var p = Popcorn('#popcorn-this')
.wikipedia({
start: 0, // seconds
end: 10, // seconds
src: 'http://en.wikipedia.org/wiki/Cape_Town',
title: "this is an article",
target: 'wikidiv'
} )
.webpage({
id: "webpages-b",
start: 0, // seconds
end: 10, // seconds
src: 'http://zenit.senecac.on.ca/wiki/index.php/Processing.js',
target: 'webpagediv'
} );
}, false);
</script>
<title>Popcorn Video Demo</title>
</head>
<body>
<!-- You have to have an id in the video tag for Popcorn to work -->
<video id="popcorn-this" src="JB_baby.ogg" controls></video>
<!-- The following divs must have matching id -->
<div id="wikidiv"></div>
<div id="webpagediv"></div>
</body>
</html>
</pre>
