зеркало из 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,
|
||||
baselineTime = date,
|
||||
currentTime = 0,
|
||||
readyState = 0,
|
||||
volume = 1,
|
||||
muted = false,
|
||||
events = {},
|
||||
|
|
@ -27,9 +28,20 @@
|
|||
timeout,
|
||||
popcorn;
|
||||
|
||||
if ( !container.addEventListener && container.attachEvent ) {
|
||||
|
||||
basePlayer = container || document.createElement( "div" );
|
||||
}
|
||||
|
||||
// copies a div into the media object
|
||||
for( var val in container ) {
|
||||
|
||||
// don't copy properties if using container as baseplayer
|
||||
if ( val in basePlayer ) {
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( typeof container[ val ] === "object" ) {
|
||||
|
||||
basePlayer[ val ] = container[ val ];
|
||||
|
|
@ -144,6 +156,19 @@
|
|||
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
|
||||
basePlayer.addEventListener = function( evtName, fn ) {
|
||||
|
||||
|
|
@ -156,6 +181,29 @@
|
|||
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
|
||||
basePlayer.dispatchEvent = function( oEvent ) {
|
||||
|
||||
|
|
@ -185,7 +233,6 @@
|
|||
|
||||
// Attempt to get src from playerFn parameter
|
||||
basePlayer.src = src || "";
|
||||
basePlayer.readyState = 0;
|
||||
basePlayer.duration = 0;
|
||||
basePlayer.paused = true;
|
||||
basePlayer.ended = 0;
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
|
||||
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/>";
|
||||
|
||||
|
|
|
|||
|
|
@ -1769,7 +1769,7 @@
|
|||
url = url.replace( parts.join( "=" ), parts[ 0 ] + "=" + callback );
|
||||
}
|
||||
|
||||
script.onload = function() {
|
||||
script.addEventListener( "load", function() {
|
||||
|
||||
// Handling remote script loading callbacks
|
||||
if ( isScript ) {
|
||||
|
|
@ -1784,7 +1784,7 @@
|
|||
}
|
||||
// Garbage collect the script resource
|
||||
head.removeChild( script );
|
||||
};
|
||||
}, false );
|
||||
|
||||
script.src = url;
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче