зеркало из https://github.com/mozilla/popcorn-js.git
initial wiki work [#158]
This commit is contained in:
Anna Sobiepanek
Родитель
16238c34a8
Коммит
14dbbd09fd
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Popcorn WebPage Plug-in Demo</title>
|
||||
|
||||
<script src="../../popcorn.js"></script>
|
||||
<script src="popcorn.webpage.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var p = Popcorn('#video')
|
||||
.play()
|
||||
.webpage({
|
||||
id: "webpages-a",
|
||||
start: 5, // seconds
|
||||
end: 15, // seconds
|
||||
src: 'http://www.webmademovies.org',
|
||||
target: 'webpagediv'
|
||||
} )
|
||||
.webpage({
|
||||
id: "webpages-b",
|
||||
start: 20, // seconds
|
||||
end: 45, // seconds
|
||||
src: 'http://zenit.senecac.on.ca/wiki/index.php/Processing.js',
|
||||
target: 'webpagediv2'
|
||||
} );
|
||||
|
||||
}, false);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="qunit-header">Popcorn WebPage Plug-in Demo</h1>
|
||||
<p> A Webpage displaying webmademovies.org will appear at 5 seconds and disappear at 15 seconds.</p>
|
||||
<p> A Webpage displaying zenit Processing.js wiki will appear at 20 seconds and disappear at 45 seconds.</p>
|
||||
<div>
|
||||
<video id='video'
|
||||
controls preload='none'
|
||||
width= '250px'
|
||||
poster="../../test/poster.png">
|
||||
|
||||
<source id='mp4'
|
||||
src="../../test/trailer.mp4"
|
||||
type='video/mp4; codecs="avc1, mp4a"'>
|
||||
|
||||
<source id='ogv'
|
||||
src="../../test/trailer.ogv"
|
||||
type='video/ogg; codecs="theora, vorbis"'>
|
||||
|
||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
|
||||
</video>
|
||||
</div>
|
||||
<div id="webpagediv" width="50%" height="50%">
|
||||
<div id="webpagediv2">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
// PLUGIN: WEBPAGE
|
||||
|
||||
(function (Popcorn) {
|
||||
|
||||
/**
|
||||
* Wikipedia popcorn plug-in
|
||||
* Displays a wikipedia aricle in the target specified by the user
|
||||
* Options parameter will need a start, end, target, lang, src, and numOfWords.
|
||||
* Start is the time that you want this plug-in to execute
|
||||
* End is the time that you want this plug-in to stop executing
|
||||
* Target is the id of the document element that the iframe needs to be attached to,
|
||||
* this target element must exist on the DOM
|
||||
* Lang (optional, defaults to english)is the language in which the article is in.
|
||||
* Src is the url of the article
|
||||
* NumOfWords (optional, defaults to 200) is the number of words you want displaid.
|
||||
*
|
||||
* @param {Object} options
|
||||
*
|
||||
* Example:
|
||||
var p = Popcorn('#video')
|
||||
.wikipedia({
|
||||
id: "webpages-a",
|
||||
start: 5, // seconds
|
||||
end: 15, // seconds
|
||||
src: 'http://www.webmademovies.org',
|
||||
target: 'webpagediv'
|
||||
} )
|
||||
*
|
||||
*/
|
||||
Popcorn.plugin( "wikipedia" , (function(){
|
||||
|
||||
var temp, length;
|
||||
|
||||
|
||||
return {
|
||||
/**
|
||||
* @member wikipedia
|
||||
* The start function will be executed when the currentTime
|
||||
* of the video reaches the start time provided by the
|
||||
* options variable
|
||||
*/
|
||||
start: function(event, options){
|
||||
if (typeof options.lang === 'undefined') {options.lang="en";}
|
||||
temp = document.getElementById( options.target );
|
||||
length = options.numOfWords || 200;
|
||||
|
||||
},
|
||||
/**
|
||||
* @member wikipedia
|
||||
* The end function will be executed when the currentTime
|
||||
* of the video reaches the end time provided by the
|
||||
* options variable
|
||||
*/
|
||||
end: function(event, options){
|
||||
temp.removeChild(iframe);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})());
|
||||
|
||||
})( Popcorn );
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Popcorn API</title>
|
||||
<link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen">
|
||||
<script src="../../test/qunit/qunit.js"></script>
|
||||
<!--
|
||||
do not move - this must be called immediately prior to
|
||||
popcorn-api-draft.js
|
||||
-->
|
||||
|
||||
<script src="../../popcorn.js"></script>
|
||||
<script src="popcorn.webpage.js"></script>
|
||||
|
||||
<script src="popcorn.webpage.unit.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="qunit-header">Popcorn Webpage UI</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests"></ol>
|
||||
<div id="qunit-fixture"> </div>
|
||||
|
||||
<video id='video'
|
||||
controls preload='none'
|
||||
width= '250px'
|
||||
poster="../../test/poster.png">
|
||||
|
||||
<source id='mp4'
|
||||
src="../../test/trailer.mp4"
|
||||
type='video/mp4; codecs="avc1, mp4a"'>
|
||||
|
||||
<source id='ogv'
|
||||
src="../../test/trailer.ogv"
|
||||
type='video/ogg; codecs="theora, vorbis"'>
|
||||
|
||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
|
||||
</video>
|
||||
<div id="webpagediv"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
test("Popcorn Webpage Plugin", function () {
|
||||
|
||||
var popped = Popcorn("#video"),
|
||||
expects = 11,
|
||||
count = 0,
|
||||
iframeInterval,
|
||||
iframeInterval2,
|
||||
iframeInterval3,
|
||||
iframeInterval4;
|
||||
theiFrame = document.getElementsByTagName('iframe');
|
||||
expect(expects);
|
||||
|
||||
function plus() {
|
||||
if ( ++count===expects) {
|
||||
start();
|
||||
}
|
||||
}
|
||||
|
||||
stop();
|
||||
|
||||
ok ('webpage' in popped, "webpages is a mehtod of the popped instance");
|
||||
plus();
|
||||
|
||||
equals (theiFrame.length, 0, "initially, there is no iframes on the page" );
|
||||
plus();
|
||||
|
||||
popped.webpage({
|
||||
id: "webpages-a",
|
||||
start: 5, // seconds
|
||||
end: 25, // seconds
|
||||
src: 'http://webmademovies.org',
|
||||
target: 'webpagediv'
|
||||
})
|
||||
.webpage({
|
||||
id: "webpages-b",
|
||||
start: 35, // seconds
|
||||
end: 50, // seconds
|
||||
src: 'http://zenit.senecac.on.ca/wiki/index.php/Processing.js',
|
||||
target: 'webpagediv'
|
||||
})
|
||||
.play();
|
||||
|
||||
|
||||
iframeInterval = setInterval( function() {
|
||||
if( popped.currentTime() > 7 && popped.currentTime() <= 25 ) {
|
||||
ok (!!theiFrame[0], "iframe was created" );
|
||||
plus();
|
||||
equals (theiFrame.length, 1, "there is only one iframe on the page" );
|
||||
plus();
|
||||
equals (theiFrame[0].id, "webpages-a", "iframe has the id 'webpages-a'" );
|
||||
plus();
|
||||
equals (theiFrame[0].src, "http://webmademovies.org/", "iframe has the src 'http://webmademovies.org/'" );
|
||||
plus();
|
||||
clearInterval( iframeInterval );
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
iframeInterval2 = setInterval( function() {
|
||||
if( popped.currentTime() > 27 && popped.currentTime() < 35 ) {
|
||||
equals (theiFrame.length, 0, "the iframe has been removed" );
|
||||
plus();
|
||||
clearInterval( iframeInterval2 );
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
iframeInterval3 = setInterval( function() {
|
||||
if( popped.currentTime() > 37 && popped.currentTime() <= 50 ) {
|
||||
ok (!!theiFrame[0], "iframe was created" );
|
||||
plus();
|
||||
equals (theiFrame.length, 1, "there is only one iframe on the page" );
|
||||
plus();
|
||||
equals (theiFrame[0].id, "webpages-b", "iframe has the id 'webpages-b'" );
|
||||
plus();
|
||||
equals (theiFrame[0].src,"http://zenit.senecac.on.ca/wiki/index.php/Processing.js", "iframe has the src 'http://zenit.senecac.on.ca/wiki/index.php/Processing.js'" );
|
||||
plus();
|
||||
clearInterval( iframeInterval3 );
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
});
|
||||
Загрузка…
Ссылка в новой задаче