130
edits
PopcornOpenVideoAPI: Difference between revisions
Jump to navigation
Jump to search
→First XML-based page
| Line 383: | Line 383: | ||
<link href="style.css" rel="stylesheet" type="text/css" /> | <link href="style.css" rel="stylesheet" type="text/css" /> | ||
<!-- These two are needed for google news api --> | <!-- These two are needed for google news api --> | ||
<script src="http://google.com/jsapi"></script> | <script src="http://google.com/jsapi"></script> | ||
| Line 517: | Line 515: | ||
* you need to escape your html with entity tags in the footnote in order for it to work (CDATA might also work) | * 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 | * 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> | |||