зеркало из https://github.com/mozilla/popcorn-js.git
webpage plugin and tests [#160]
This commit is contained in:
Anna Sobiepanek
Родитель
552bffb428
Коммит
b7c8769548
|
|
@ -9,17 +9,17 @@
|
|||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var p = Popcorn('#video')
|
||||
.play()
|
||||
.webpages({
|
||||
.webpage({
|
||||
id: "webpages-a",
|
||||
start: 5, // seconds
|
||||
end: 15, // seconds
|
||||
src: 'http://www.webmademovies.org',
|
||||
target: 'webpagediv'
|
||||
} )
|
||||
.webpages({
|
||||
.webpage({
|
||||
id: "webpages-b",
|
||||
start: 20, // seconds
|
||||
end: 25, // seconds
|
||||
end: 45, // seconds
|
||||
src: 'http://zenit.senecac.on.ca/wiki/index.php/Processing.js',
|
||||
target: 'webpagediv2'
|
||||
} );
|
||||
|
|
@ -30,19 +30,20 @@
|
|||
</head>
|
||||
<body>
|
||||
<h1 id="qunit-header">Popcorn WebPage Plug-in Demo</h1>
|
||||
<p> A Webpage displaying webmademovies.org will appear at 0 seconds and disappear at 5 seconds.</p>
|
||||
<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="http://media.w3.org/2010/05/sintel/poster.png">
|
||||
poster="../../test/poster.png">
|
||||
|
||||
<source id='mp4'
|
||||
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
|
||||
src="../../test/trailer.mp4"
|
||||
type='video/mp4; codecs="avc1, mp4a"'>
|
||||
|
||||
<source id='ogv'
|
||||
src="http://media.w3.org/2010/05/sintel/trailer.ogv"
|
||||
src="../../test/trailer.ogv"
|
||||
type='video/ogg; codecs="theora, vorbis"'>
|
||||
|
||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,64 @@
|
|||
// PLUGIN: WEBPAGE
|
||||
|
||||
(function (Popcorn) {
|
||||
|
||||
/**
|
||||
* Webpages popcorn plug-in
|
||||
* Creates an iframe showing a website specified by the user
|
||||
* Options parameter will need a start, duration or out, and src.
|
||||
* Options parameter will need a start, end, id, target and src.
|
||||
* Start is the time that you want this plug-in to execute
|
||||
* Out is the time that you want this plug-in to stop executing [not currently implemented]
|
||||
* Duration can be used instead of out to state how long you want the plug-in to execute for
|
||||
* Target is the id of the document element that the iframe needs to be attached to
|
||||
* End is the time that you want this plug-in to stop executing
|
||||
* Id is the id that you want assigned to the iframe
|
||||
* Target is the id of the document element that the iframe needs to be attached to,
|
||||
* this target element must exist on the DOM
|
||||
* Src is the url of the website that you want the iframe to display
|
||||
*
|
||||
* @param {Object} options
|
||||
*
|
||||
* Example:
|
||||
var p = Popcorn('#video')
|
||||
.webpage({
|
||||
id: "webpages-a",
|
||||
start: 5, // seconds
|
||||
end: 15, // seconds
|
||||
src: 'http://www.webmademovies.org',
|
||||
target: 'webpagediv'
|
||||
} )
|
||||
*
|
||||
*/
|
||||
Popcorn.plugin( "webpages" , function ( options ) {
|
||||
|
||||
var exists,
|
||||
iframe = document.createElement( 'iframe' ),
|
||||
page = [],
|
||||
temp = document.getElementById( options.target );
|
||||
|
||||
// set the style of the iframe
|
||||
Popcorn.plugin( "webpage" , (function(){
|
||||
|
||||
var exists, iframe, temp;
|
||||
iframe = document.createElement( 'iframe' ),
|
||||
iframe.setAttribute('width', "100%");
|
||||
iframe.setAttribute('height', "100%");
|
||||
iframe.id = options.id;
|
||||
iframe.src = options.src;
|
||||
|
||||
// listen function will add/remove the iframe from the page at the appropriate times
|
||||
this.listen("timeupdate", function (event) {
|
||||
exists = document.getElementById( options.id );
|
||||
if ( this.currentTime() >= options.start && !exists && this.currentTime() <= options.end ) {
|
||||
temp.appendChild(iframe);
|
||||
}
|
||||
// remove the iframe if the current time of the video is greater than
|
||||
// the end time specified by the user
|
||||
if ( this.currentTime() >= options.end && exists ) {
|
||||
temp.removeChild(iframe);
|
||||
}
|
||||
// if the user seeks to a time before the webpage command
|
||||
// ensure that the iframe was removed
|
||||
if ( this.currentTime() < options.start && exists ) {
|
||||
temp.removeChild(iframe);
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
});
|
||||
|
||||
return {
|
||||
/**
|
||||
* @member webpage
|
||||
* 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){
|
||||
temp = document.getElementById( options.target );
|
||||
iframe.id = options.id;
|
||||
iframe.src = options.src;
|
||||
temp.appendChild(iframe);
|
||||
},
|
||||
/**
|
||||
* @member webpage
|
||||
* 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);
|
||||
})( Popcorn );
|
||||
|
|
@ -20,31 +20,24 @@
|
|||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests"></ol>
|
||||
<div id="qunit-fixture">
|
||||
|
||||
|
||||
|
||||
<div id="qunit-fixture"> </div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<video id='video'
|
||||
<video id='video'
|
||||
controls preload='none'
|
||||
width ='200'
|
||||
poster="http://media.w3.org/2010/05/sintel/poster.png">
|
||||
width= '250px'
|
||||
poster="../../test/poster.png">
|
||||
|
||||
<source id='mp4'
|
||||
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
|
||||
src="../../test/trailer.mp4"
|
||||
type='video/mp4; codecs="avc1, mp4a"'>
|
||||
|
||||
<source id='ogv'
|
||||
src="http://media.w3.org/2010/05/sintel/trailer.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>
|
||||
<div id="webpagediv"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,80 @@
|
|||
test("Popcorn Webpage Plugin", function () {
|
||||
|
||||
var popped = Popcorn("#video")
|
||||
expects = 2,
|
||||
count = 0
|
||||
;
|
||||
var popped = Popcorn("#video"),
|
||||
expects = 11,
|
||||
count = 0,
|
||||
iframeInterval,
|
||||
iframeInterval2,
|
||||
iframeInterval3,
|
||||
iframeInterval4;
|
||||
|
||||
expect(expects);
|
||||
|
||||
function plus() {
|
||||
if( ++count===expects) {
|
||||
if ( ++count===expects) {
|
||||
start();
|
||||
}
|
||||
}
|
||||
|
||||
stop();
|
||||
|
||||
|
||||
ok( 'webpages' in popped, "webpages is a mehtod of the popped instance");
|
||||
|
||||
ok ('webpage' in popped, "webpages is a mehtod of the popped instance");
|
||||
plus();
|
||||
|
||||
popped.webpages({
|
||||
ok (document.getElementsByTagName('iframe').length === 0, "initially, there is no iframes on the page" );
|
||||
plus();
|
||||
|
||||
popped.webpage({
|
||||
id: "webpages-a",
|
||||
start: 1, // seconds
|
||||
end: 30, // seconds
|
||||
src: 'http://www.webmademovies.org',
|
||||
start: 5, // seconds
|
||||
end: 25, // seconds
|
||||
src: 'http://webmademovies.org',
|
||||
target: 'webpagediv'
|
||||
}).play();
|
||||
})
|
||||
.webpage({
|
||||
id: "webpages-b",
|
||||
start: 35, // seconds
|
||||
end: 50, // seconds
|
||||
src: 'http://zenit.senecac.on.ca/wiki/index.php/Processing.js',
|
||||
target: 'webpagediv'
|
||||
})
|
||||
.play();
|
||||
|
||||
|
||||
|
||||
setTimeout(function() {
|
||||
ok( !!document.getElementsByTagName('iframe')[0], "iframe was created" );
|
||||
plus();
|
||||
iframeInterval = setInterval( function() {
|
||||
if( popped.currentTime() > 5 && popped.currentTime() <= 25 ) {
|
||||
ok (!!document.getElementsByTagName('iframe')[0], "iframe was created" );
|
||||
plus();
|
||||
ok (document.getElementsByTagName('iframe').length === 1, "there is only one iframe on the page" );
|
||||
plus();
|
||||
ok (document.getElementsByTagName('iframe')[0].id === "webpages-a", "iframe has the id 'webpages-a'" );
|
||||
plus();
|
||||
ok (document.getElementsByTagName('iframe')[0].src === "http://webmademovies.org/", "iframe has the src 'http://webmademovies.org/'" );
|
||||
plus();
|
||||
clearInterval( iframeInterval );
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
iframeInterval2 = setInterval( function() {
|
||||
if( popped.currentTime() > 25 && popped.currentTime() < 35 ) {
|
||||
ok (document.getElementsByTagName('iframe').length === 0, "the iframe has been removed" );
|
||||
plus();
|
||||
clearInterval( iframeInterval2 );
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
iframeInterval3 = setInterval( function() {
|
||||
if( popped.currentTime() > 35 && popped.currentTime() <= 50 ) {
|
||||
ok (!!document.getElementsByTagName('iframe')[0], "iframe was created" );
|
||||
plus();
|
||||
ok (document.getElementsByTagName('iframe').length === 1, "there is only one iframe on the page" );
|
||||
plus();
|
||||
ok (document.getElementsByTagName('iframe')[0].id === "webpages-b", "iframe has the id 'webpages-b'" );
|
||||
plus();
|
||||
ok (document.getElementsByTagName('iframe')[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);
|
||||
|
||||
});
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче