зеркало из https://github.com/mozilla/popcorn-js.git
[#895] ie8 initial support
This commit is contained in:
ScottDowne
Родитель
b1af377e71
Коммит
d7cfdbaeb6
|
|
@ -0,0 +1,215 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Popcorn Youtube Player Example</title>
|
||||||
|
<script src="popcorn.ie8.js"></script>
|
||||||
|
<script src="../../popcorn.js"></script>
|
||||||
|
<script src="../../modules/player/popcorn.player.js"></script>
|
||||||
|
<script src="../../players/youtube/popcorn.youtube.js"></script>
|
||||||
|
<script src="../../plugins/footnote/popcorn.footnote.js"></script>
|
||||||
|
<script src="../../plugins/flickr/popcorn.flickr.js"></script>
|
||||||
|
<script src="../../plugins/attribution/popcorn.attribution.js"></script>
|
||||||
|
<script src="../../plugins/webpage/popcorn.webpage.js"></script>
|
||||||
|
<script src="../../plugins/googlefeed/popcorn.googlefeed.js"></script>
|
||||||
|
<script src="../../plugins/image/popcorn.image.js"></script>
|
||||||
|
<script src="../../plugins/subtitle/popcorn.subtitle.js"></script>
|
||||||
|
<script src="../../plugins/twitter/popcorn.twitter.js"></script>
|
||||||
|
<script>
|
||||||
|
// Helper function to get elements
|
||||||
|
function element(id) {
|
||||||
|
|
||||||
|
return document.getElementById(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
var done = false;
|
||||||
|
|
||||||
|
document.addEventListener( 'DOMContentLoaded', function( e ) {
|
||||||
|
|
||||||
|
if ( done ) {
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
done = true;
|
||||||
|
|
||||||
|
var paused = true,
|
||||||
|
popcorn;
|
||||||
|
|
||||||
|
popcorn = Popcorn.youtube( '#video', 'http://www.youtube.com/watch?v=nfGV32RNkhw&autoplay=0' );
|
||||||
|
|
||||||
|
popcorn = popcorn
|
||||||
|
.footnote({
|
||||||
|
start: 5, // seconds
|
||||||
|
end: 40, // seconds
|
||||||
|
text: 'The video is "RiP: A Remix Manifesto", by Brett Gaylor',
|
||||||
|
target: 'footnotediv'
|
||||||
|
})
|
||||||
|
.flickr({
|
||||||
|
start: 20, // seconds
|
||||||
|
end: 40, // seconds
|
||||||
|
tags: 'georgia',
|
||||||
|
numberofimages: '8',
|
||||||
|
target: 'flickrdiv'
|
||||||
|
})
|
||||||
|
.twitter({
|
||||||
|
start: 20, // seconds
|
||||||
|
end: 45, // seconds
|
||||||
|
title: 'Oil Spill',
|
||||||
|
src: '#oilspill',
|
||||||
|
target: 'twitterdiv'
|
||||||
|
})
|
||||||
|
.attribution({
|
||||||
|
start: 5, // seconds
|
||||||
|
end: 60, // seconds
|
||||||
|
nameofwork: "Internet",
|
||||||
|
nameofworkurl:"http://www.archive.org/details/CC1232_internet",
|
||||||
|
copyrightholder:"The Computer Chronicles",
|
||||||
|
license:"CC-BY-NC-ND",
|
||||||
|
licenseurl: "http://creativecommons.org/licenses/by-nc-nd/2.0/",
|
||||||
|
target: 'attribdiv'
|
||||||
|
})
|
||||||
|
.subtitle({
|
||||||
|
start: 5, // seconds
|
||||||
|
end: 15, // seconds
|
||||||
|
text: 'This is overlaid on top of the video. You can hightlight it!',
|
||||||
|
display: 'inline',
|
||||||
|
language: "en"
|
||||||
|
})
|
||||||
|
.webpage({
|
||||||
|
id: "webpages-a",
|
||||||
|
start: 0, // seconds
|
||||||
|
end: 15, // seconds
|
||||||
|
src: 'http://webmademovies.org/',
|
||||||
|
target: 'webpagediv'
|
||||||
|
})
|
||||||
|
/*.googlefeed({
|
||||||
|
start: 0, // seconds
|
||||||
|
end: 15, // seconds
|
||||||
|
target: "feeddiv",
|
||||||
|
url: "http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml",
|
||||||
|
title: "Planet Feed",
|
||||||
|
orientation: "Vertical"
|
||||||
|
})*/
|
||||||
|
.image({
|
||||||
|
start: 5, // seconds
|
||||||
|
end: 15, // seconds
|
||||||
|
href: 'http://www.drumbeat.org/',
|
||||||
|
src: 'https://www.drumbeat.org/media//images/drumbeat-logo-splash.png',
|
||||||
|
target: 'imagediv'
|
||||||
|
})
|
||||||
|
.listen( 'durationchange', function() {
|
||||||
|
element( 'player-duration' ).innerHTML = popcorn.duration();
|
||||||
|
})
|
||||||
|
.listen( 'volumechange', function() {
|
||||||
|
element( 'player_vol' ).innerHTML = popcorn.volume();
|
||||||
|
})
|
||||||
|
.listen( 'timeupdate', function() {
|
||||||
|
element( 'player-time' ).innerHTML = popcorn.currentTime();
|
||||||
|
})
|
||||||
|
// Update button labels
|
||||||
|
.listen( 'play' , function() {
|
||||||
|
paused = false;
|
||||||
|
element( 'btn-play-pause' ).innerHTML = 'Pause';
|
||||||
|
})
|
||||||
|
.listen('pause', function() {
|
||||||
|
paused = true;
|
||||||
|
element( 'btn-play-pause' ).innerHTML = 'Play';
|
||||||
|
});
|
||||||
|
|
||||||
|
element( 'player-status' ).innerHTML = 'Ready';
|
||||||
|
element( 'player_vol' ).innerHTML = popcorn.volume();
|
||||||
|
|
||||||
|
// Single play/pause button
|
||||||
|
|
||||||
|
element( 'btn-play-pause' ).attachEvent( 'onclick', function() {
|
||||||
|
|
||||||
|
if ( paused ) {
|
||||||
|
popcorn.play();
|
||||||
|
} else {
|
||||||
|
popcorn.pause();
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
// Seek
|
||||||
|
element('btn-seek').attachEvent('onclick', function() {
|
||||||
|
|
||||||
|
popcorn.currentTime( 30 );
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
// Volume
|
||||||
|
element('btn-volume').attachEvent('onclick', function() {
|
||||||
|
var volume = (popcorn.volume() === 1) ? 0.5 : 1;
|
||||||
|
popcorn.volume(volume);
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
element('btn-mute').attachEvent('onclick', function() {
|
||||||
|
popcorn.mute( !popcorn.media.muted );
|
||||||
|
}, false);
|
||||||
|
}, false );
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div id="video" style="width: 360px; height: 300px;" ></div><br />
|
||||||
|
<button class="simple" id="btn-play-pause">Play</button>
|
||||||
|
<button class="seek" id="btn-seek">Seek to 30</button>
|
||||||
|
<button class="volume" id="btn-volume">Toggle Volume</button>
|
||||||
|
<button class="mute" id="btn-mute">Toggle Mute</button>
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li>Status: <span id="player-status">Not Ready</span></li>
|
||||||
|
<li>Current Time (s): <span id="player-time"></span></li>
|
||||||
|
<li>Volume (0-1): <span id="player_vol"></span></li>
|
||||||
|
<li>Video Duration (s): <span id="player-duration"></span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Description</h3>
|
||||||
|
<p>
|
||||||
|
This demo will showcase how a Youtube flash video can be integrated into Popcorn. This is done by making the flash video masquerade as HTML 5 video.<br />
|
||||||
|
Due to the Flash security model, this demo must be run from a web server<br />
|
||||||
|
From 5 to 40 seconds, the footnote 'The video is "RiP: A Remix Manifesto", by Brett Gaylor' will appear below 'Footnote Area'.
|
||||||
|
<hr >
|
||||||
|
Youtube does support their player to be chromeless (hidden controls), but their controls are left in to provide richer interaction.<br />
|
||||||
|
Custom controls have been developed and tied into their player for this demo.<br />
|
||||||
|
Clicking play/pause or seeking in either the video or via custom controls will cause the other to update.<br />
|
||||||
|
The video can be specified in the HTML source by giving the youtube web site url (http://www.youtube.com/watch?v=VIDEOID) to either Popcorn.youtube or as the div src attribute.<br/>
|
||||||
|
</p>
|
||||||
|
<h4>Expected Events</h4>
|
||||||
|
<ul>
|
||||||
|
<li>From 5 to 40 seconds, the footnote 'The video is "RiP: A Remix Manifesto", by Brett Gaylor' will appear below 'Footnote Area'.</li>
|
||||||
|
<li>From 20 to 40 seconds, the a flickr stream of 8 images tagged 'georgia' will appear below 'Flickr Area'.</li>
|
||||||
|
<li>From 20 to 45 seconds, tweets tagged #oilspill will appear below 'Twitter Area'.</li>
|
||||||
|
<li>From 5 to 60 seconds, the Creative Commons license will appear below 'Attributions Area'.</li>
|
||||||
|
<li>From 5 to 15 seconds, the Mozilla Drumbeat logo will appear below 'Image Area'.</li>
|
||||||
|
<li>From 5 to 15 seconds, the subtitle 'This is overlaid on top of the video. You can hightlight it!' will appear in front of the video.</li>
|
||||||
|
<li>From 0 to 20 seconds, blogs from 'http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml' will appear below 'Google Feed Area'.</li>
|
||||||
|
<li>From 0 to 15 seconds, the site 'http://webmademovies.org/' will appear below 'Web Page Area'.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="footnotediv" width="50%" height="50%">
|
||||||
|
<strong>Footnote Area</strong><br />
|
||||||
|
</div>
|
||||||
|
<div id="attribdiv" width="50%" height="50%">
|
||||||
|
<strong>Attributions Area</strong><br />
|
||||||
|
</div>
|
||||||
|
<div id="flickrdiv" width="50%" height="50%">
|
||||||
|
<strong>Flickr Area</strong><br />
|
||||||
|
</div>
|
||||||
|
<div id="twitterdiv" width="50%" height="50%">
|
||||||
|
<strong>Twitter Area</strong><br />
|
||||||
|
</div>
|
||||||
|
<div id="imagediv" width="50%" height="50%">
|
||||||
|
<strong>Image Area</strong><br />
|
||||||
|
</div>
|
||||||
|
<div id="feeddiv" width="50%" height="50%">
|
||||||
|
<strong>Google Feed Area</strong><br />
|
||||||
|
</div>
|
||||||
|
<div id="webpagediv" width="100px" height="50px">
|
||||||
|
<strong>Web Page Area</strong><br />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
document.addEventListener = document.addEventListener || function( event, callBack ) {
|
||||||
|
|
||||||
|
event = ( event === "DOMContentLoaded" ) ? "onreadystatechange" : "on" + event;
|
||||||
|
|
||||||
|
document.attachEvent( event, callBack );
|
||||||
|
};
|
||||||
|
|
||||||
|
document.removeEventListener = document.removeEventListener || function( event, callBack ) {
|
||||||
|
|
||||||
|
event = ( event === "DOMContentLoaded" ) ? "onreadystatechange" : "on" + event;
|
||||||
|
|
||||||
|
document.detachEvent( event, callBack );
|
||||||
|
};
|
||||||
|
|
||||||
|
HTMLScriptElement.prototype.addEventListener = HTMLScriptElement.prototype.addEventListener || function( event, callBack ) {
|
||||||
|
|
||||||
|
event = ( event === "load" ) ? "onreadystatechange" : "on" + event;
|
||||||
|
|
||||||
|
this.attachEvent( event, callBack );
|
||||||
|
};
|
||||||
|
|
||||||
|
HTMLScriptElement.prototype.removeEventListener = HTMLScriptElement.prototype.removeEventListener || function( event, callBack ) {
|
||||||
|
|
||||||
|
event = ( event === "load" ) ? "onreadystatechange" : "on" + event;
|
||||||
|
|
||||||
|
this.detachEvent( event, callBack );
|
||||||
|
};
|
||||||
|
|
||||||
|
document.createEvent = document.createEvent || function ( type ) {
|
||||||
|
|
||||||
|
return {
|
||||||
|
type : null,
|
||||||
|
target : null,
|
||||||
|
currentTarget : null,
|
||||||
|
cancelable : false,
|
||||||
|
bubbles : false,
|
||||||
|
initEvent : function (type, bubbles, cancelable) {
|
||||||
|
this.type = type;
|
||||||
|
},
|
||||||
|
stopPropagation : function () {},
|
||||||
|
stopImmediatePropagation : function () {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var forEach = Array.prototype.forEach,
|
||||||
|
hasOwn = Object.prototype.hasOwnProperty;
|
||||||
|
|
||||||
|
Array.prototype.forEach = forEach || function( fn, context ) {
|
||||||
|
|
||||||
|
var obj = this;
|
||||||
|
|
||||||
|
if ( !obj || !fn ) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
context = context || this;
|
||||||
|
|
||||||
|
var key, len;
|
||||||
|
|
||||||
|
// Use native whenever possible
|
||||||
|
if ( forEach && obj.forEach === forEach ) {
|
||||||
|
return obj.forEach( fn, context );
|
||||||
|
}
|
||||||
|
|
||||||
|
for ( key in obj ) {
|
||||||
|
if ( hasOwn.call( obj, key ) ) {
|
||||||
|
fn.call( context, obj[ key ], key, obj );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.prototype.map = Object.prototype.map || function( obj, fn, context ) {
|
||||||
|
|
||||||
|
if ( !obj || !fn ) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
context = context || this;
|
||||||
|
var key, len, result = [];
|
||||||
|
|
||||||
|
Popcorn.forEach( obj, function ( val, key ) {
|
||||||
|
|
||||||
|
result.push( fn.call( context, val, key, obj ) );
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
Object.prototype.indexOf = Object.prototype.indexOf || function ( searchElement, fromIndex ) {
|
||||||
|
|
||||||
|
var arr = this;
|
||||||
|
|
||||||
|
for ( var i = fromIndex || 0; i < arr.length; i++ ) {
|
||||||
|
|
||||||
|
if ( arr[ i ] === searchElement ) {
|
||||||
|
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return -1;
|
||||||
|
};
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
var date = new Date() / 1000,
|
var date = new Date() / 1000,
|
||||||
baselineTime = date,
|
baselineTime = date,
|
||||||
currentTime = 0,
|
currentTime = 0,
|
||||||
|
readyState = 0,
|
||||||
volume = 1,
|
volume = 1,
|
||||||
muted = false,
|
muted = false,
|
||||||
events = {},
|
events = {},
|
||||||
|
|
@ -27,9 +28,20 @@
|
||||||
timeout,
|
timeout,
|
||||||
popcorn;
|
popcorn;
|
||||||
|
|
||||||
|
if ( !container.addEventListener && container.attachEvent ) {
|
||||||
|
|
||||||
|
basePlayer = container || document.createElement( "div" );
|
||||||
|
}
|
||||||
|
|
||||||
// copies a div into the media object
|
// copies a div into the media object
|
||||||
for( var val in container ) {
|
for( var val in container ) {
|
||||||
|
|
||||||
|
// don't copy properties if using container as baseplayer
|
||||||
|
if ( val in basePlayer ) {
|
||||||
|
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
if ( typeof container[ val ] === "object" ) {
|
if ( typeof container[ val ] === "object" ) {
|
||||||
|
|
||||||
basePlayer[ val ] = container[ val ];
|
basePlayer[ val ] = container[ val ];
|
||||||
|
|
@ -144,6 +156,19 @@
|
||||||
configurable: true
|
configurable: true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Popcorn.player.defineProperty( basePlayer, "readyState", {
|
||||||
|
get: function() {
|
||||||
|
|
||||||
|
return readyState;
|
||||||
|
},
|
||||||
|
set: function( val ) {
|
||||||
|
|
||||||
|
readyState = val;
|
||||||
|
return readyState;
|
||||||
|
},
|
||||||
|
configurable: true
|
||||||
|
});
|
||||||
|
|
||||||
// Adds an event listener to the object
|
// Adds an event listener to the object
|
||||||
basePlayer.addEventListener = function( evtName, fn ) {
|
basePlayer.addEventListener = function( evtName, fn ) {
|
||||||
|
|
||||||
|
|
@ -156,6 +181,29 @@
|
||||||
return fn;
|
return fn;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Removes an event listener from the object
|
||||||
|
basePlayer.removeEventListener = function( evtName, fn ) {
|
||||||
|
|
||||||
|
var i,
|
||||||
|
listeners = events[ evtName ];
|
||||||
|
|
||||||
|
if ( ! listeners ){
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// walk backwards so we can safely splice
|
||||||
|
for ( i = events[ evtName ].length - 1; i >= 0; i-- ) {
|
||||||
|
|
||||||
|
if( fn === listeners[ i ] ) {
|
||||||
|
|
||||||
|
listeners.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return fn;
|
||||||
|
};
|
||||||
|
|
||||||
// Can take event object or simple string
|
// Can take event object or simple string
|
||||||
basePlayer.dispatchEvent = function( oEvent ) {
|
basePlayer.dispatchEvent = function( oEvent ) {
|
||||||
|
|
||||||
|
|
@ -185,7 +233,6 @@
|
||||||
|
|
||||||
// Attempt to get src from playerFn parameter
|
// Attempt to get src from playerFn parameter
|
||||||
basePlayer.src = src || "";
|
basePlayer.src = src || "";
|
||||||
basePlayer.readyState = 0;
|
|
||||||
basePlayer.duration = 0;
|
basePlayer.duration = 0;
|
||||||
basePlayer.paused = true;
|
basePlayer.paused = true;
|
||||||
basePlayer.ended = 0;
|
basePlayer.ended = 0;
|
||||||
|
|
|
||||||
|
|
@ -107,7 +107,7 @@
|
||||||
|
|
||||||
Popcorn.xhr.getJSONP( _uri, function( data ) {
|
Popcorn.xhr.getJSONP( _uri, function( data ) {
|
||||||
|
|
||||||
var fragment = document.createElement( "p" );
|
var fragment = document.createElement( "div" );
|
||||||
|
|
||||||
fragment.innerHTML = "<p style='padding:" + _padding + ";'>" + data.title + "<p/>";
|
fragment.innerHTML = "<p style='padding:" + _padding + ";'>" + data.title + "<p/>";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1769,7 +1769,7 @@
|
||||||
url = url.replace( parts.join( "=" ), parts[ 0 ] + "=" + callback );
|
url = url.replace( parts.join( "=" ), parts[ 0 ] + "=" + callback );
|
||||||
}
|
}
|
||||||
|
|
||||||
script.onload = function() {
|
script.addEventListener( "load", function() {
|
||||||
|
|
||||||
// Handling remote script loading callbacks
|
// Handling remote script loading callbacks
|
||||||
if ( isScript ) {
|
if ( isScript ) {
|
||||||
|
|
@ -1784,7 +1784,7 @@
|
||||||
}
|
}
|
||||||
// Garbage collect the script resource
|
// Garbage collect the script resource
|
||||||
head.removeChild( script );
|
head.removeChild( script );
|
||||||
};
|
}, false );
|
||||||
|
|
||||||
script.src = url;
|
script.src = url;
|
||||||
|
|
||||||
|
|
|
||||||
Загрузка…
Ссылка в новой задаче