Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

[t1066] Added support for multiple sources #62

Merged
merged 4 commits into from

3 participants

@secretrobotron
  1. Popcorn.smart tries to give multiple source tags to html5 media elements
  2. Tests for the above
@secretrobotron secretrobotron [t1066] Added support for multiple sources
1. Popcorn.smart tries to give multiple source tags to html5 media elements
2. Tests for the above
e14629a
modules/player/popcorn.player.js
((7 lines not shown))
node = nodeId && nodeId.length && nodeId[ 2 ] ?
document.getElementById( nodeId[ 2 ] ) :
target;
-
+
@cadecairos Owner

Please remove the end of line white space here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
modules/player/popcorn.player.js
((8 lines not shown))
node.appendChild( target );
node = target;
}
options && options.events && options.events.error && node.addEventListener( "error", options.events.error, false );
- node.src = src;
+
+ // Attempt to identify the type of the resultant node
+ targetType = target.nodeName;
+
+ if ( !targetType ) {
+
+ targetType = ( target.charAt( 0 ) === "#" ? document.getElementById( target.substring( 1 ) ) : document.getElementById( target ) ).nodeName;
@cadecairos Owner
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@cadecairos cadecairos commented on the diff
modules/player/popcorn.player.js
((17 lines not shown))
+ targetType = target.nodeName;
+
+ if ( !targetType ) {
+
+ targetType = ( target.charAt( 0 ) === "#" ? document.getElementById( target.substring( 1 ) ) : document.getElementById( target ) ).nodeName;
+
+ }
+
+ // If src is an array, add <source>'s
+ if ( typeof( src ) !== "string" && src.length ) {
+
+ for ( var i = 0; i < src.length; ++i ) {
+
+ sourceNode = document.createElement( "source" );
+ sourceNode.src = src[ i ];
+
@cadecairos Owner

plz remove this white space

@secretrobotron Owner

In person result: there is not unnecessary whitepsace here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
secretrobotron added some commits
@secretrobotron secretrobotron [t1066] review changes
1. Some more rigorous tests
2. Whitespace fixes
3. Used Popcorn.dom.find instead of doc.getEl()
08e56cf
@secretrobotron secretrobotron [t1066] review changes - lint fixes 9555c5c
@jbuck jbuck merged commit 9555c5c into mozilla:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 9, 2012
  1. @secretrobotron

    [t1066] Added support for multiple sources

    secretrobotron authored
    1. Popcorn.smart tries to give multiple source tags to html5 media elements
    2. Tests for the above
  2. @secretrobotron

    [t1066] whitespace fix

    secretrobotron authored
  3. @secretrobotron

    [t1066] review changes

    secretrobotron authored
    1. Some more rigorous tests
    2. Whitespace fixes
    3. Used Popcorn.dom.find instead of doc.getEl()
  4. @secretrobotron
This page is out of date. Refresh to see the latest.
View
64 modules/player/popcorn.player.js
@@ -16,6 +16,25 @@
// ID string matching
var rIdExp = /^(#([\w\-\_\.]+))$/;
+ var audioExtensions = [
+ "ogg",
+ "aac",
+ "mp3",
+ "wav"
+ ];
+
+ var videoExtensions = [
+ "ogv",
+ "webm",
+ "mp4",
+ "mov",
+ "avi"
+ ];
+
+ var audioExtensionRegexp = new RegExp( "^.*\\.(" + audioExtensions.join( "|" ) + ")$" );
+
+ var allExtensionRegexp = new RegExp( "^.*\\.(" + audioExtensions.join( "|" ) + "|" + videoExtensions.join( "|" ) + ")$" );
+
Popcorn.player = function( name, player ) {
// return early if a player already exists under this name
@@ -335,6 +354,9 @@
var nodeId = rIdExp.exec( target ),
playerType,
elementTypes = [ "AUDIO", "VIDEO" ],
+ sourceNode,
+ targetType,
+ firstSrc,
node = nodeId && nodeId.length && nodeId[ 2 ] ?
document.getElementById( nodeId[ 2 ] ) :
target;
@@ -367,15 +389,53 @@
// attempting to create a video in a container
if ( elementTypes.indexOf( node.nodeName ) === -1 ) {
- target = document.createElement( !!/^.*\.(ogg|aac|mp3|wav)$/.exec( src ) ? elementTypes[ 0 ] : elementTypes[ 1 ] );
+ firstSrc = typeof( src ) === "string" ? src : src.length ? src[ 0 ] : src;
+
+ target = document.createElement( !!audioExtensionRegexp.exec( firstSrc ) ? elementTypes[ 0 ] : elementTypes[ 1 ] );
node.appendChild( target );
node = target;
}
options && options.events && options.events.error && node.addEventListener( "error", options.events.error, false );
- node.src = src;
+
+ // Attempt to identify the type of the resultant node
+ targetType = target.nodeName;
+
+ if ( !targetType ) {
+
+ targetType = Popcorn.dom.find( target ).nodeName;
+
+ }
+
+ // If src is an array, add <source>'s
+ if ( typeof( src ) !== "string" && src.length ) {
+
+ for ( var i = 0; i < src.length; ++i ) {
+
+ sourceNode = document.createElement( "source" );
+ sourceNode.src = src[ i ];
+
@cadecairos Owner

plz remove this white space

@secretrobotron Owner

In person result: there is not unnecessary whitepsace here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ var extensionMatch = allExtensionRegexp.exec( src[ i ] );
+
+ // Attempt to add a type attribute to the source tag
+ if ( extensionMatch && targetType ) {
+
+ sourceNode.type = targetType.toLowerCase() + "/" + extensionMatch[1];
+
+ }
+
+ node.appendChild( sourceNode );
+ }
+
+ }
+ else {
+
+ node.src = src;
+
+ }
return Popcorn( node, options );
+
};
})( Popcorn );
View
3  modules/player/popcorn.player.unit.html
@@ -21,5 +21,8 @@ <h2 id="qunit-userAgent"></h2>
<div id="video"></div>
<audio id="audioElement" src="../../test/italia.ogg"></audio>
<video id="videoElement" src="../../test/trailer.ogv"></video>
+ <div id="multi-div"></div>
+ <video id="multi-video" controls></video>
+ <audio id="multi-audio" controls></audio>
</body>
</html>
View
40 modules/player/popcorn.player.unit.js
@@ -331,3 +331,43 @@ asyncTest( "Popcorn.smart - audio and video elements", function() {
p.destroy();
plus();
});
+
+asyncTest( "Popcorn.smart - multiple sources for HTML5 media", function() {
+ expect( 19 );
+
+ var instanceDiv,
+ count = 0,
+ p;
+
+ p = Popcorn.smart( "#multi-div", [ "../../test/trailer.ogv", "../../test/trailer.webm", "../../test/trailer.mp4" ] );
+ p = Popcorn.smart( "#multi-video", [ "../../test/trailer.ogv", "../../test/trailer.webm", "../../test/trailer.mp4" ] );
+ p = Popcorn.smart( "#multi-audio", [ "../../test/italia.ogg", "../../test/italia.mp4" ] );
+
+ instanceDiv = document.getElementById( "multi-div" );
+ ok( instanceDiv.firstChild && instanceDiv.firstChild.childNodes.length === 3, "multi-div has 3 children" );
+ ok( instanceDiv.firstChild.childNodes[ 0 ].nodeName === "SOURCE", "multi-div has <source> children [ 0 ]" );
+ ok( instanceDiv.firstChild.childNodes[ 1 ].nodeName === "SOURCE", "multi-div has <source> children [ 1 ]" );
+ ok( instanceDiv.firstChild.childNodes[ 2 ].nodeName === "SOURCE", "multi-div has <source> children [ 2 ]" );
+ ok( instanceDiv.firstChild.childNodes[ 0 ].getAttribute( "type" ) === "video/ogv", "source[ 0 ] is correct type" );
+ ok( instanceDiv.firstChild.childNodes[ 1 ].getAttribute( "type" ) === "video/webm", "source[ 1 ] is correct type" );
+ ok( instanceDiv.firstChild.childNodes[ 2 ].getAttribute( "type" ) === "video/mp4", "source[ 2 ] is correct type" );
+
+ instanceDiv = document.getElementById( "multi-video" );
+ ok( instanceDiv.childNodes.length === 3, "multi-video has 3 children" );
+ ok( instanceDiv.childNodes[ 0 ].nodeName === "SOURCE", "multi-video has <source> children [ 0 ]" );
+ ok( instanceDiv.childNodes[ 1 ].nodeName === "SOURCE", "multi-video has <source> children [ 1 ]" );
+ ok( instanceDiv.childNodes[ 2 ].nodeName === "SOURCE", "multi-video has <source> children [ 2 ]" );
+ ok( instanceDiv.childNodes[ 0 ].getAttribute( "type" ) === "video/ogv", "source[ 0 ] is correct type" );
+ ok( instanceDiv.childNodes[ 1 ].getAttribute( "type" ) === "video/webm", "source[ 1 ] is correct type" );
+ ok( instanceDiv.childNodes[ 2 ].getAttribute( "type" ) === "video/mp4", "source[ 2 ] is correct type" );
+
+ instanceDiv = document.getElementById( "multi-audio" );
+ ok( instanceDiv.childNodes.length === 2, "multi-audio has 2 children" );
+ ok( instanceDiv.childNodes[ 0 ].nodeName === "SOURCE", "multi-audio has <source> children [ 0 ]" );
+ ok( instanceDiv.childNodes[ 1 ].nodeName === "SOURCE", "multi-audio has <source> children [ 1 ]" );
+ ok( instanceDiv.childNodes[ 0 ].getAttribute( "type" ) === "audio/ogg", "source[ 0 ] is correct type" );
+ ok( instanceDiv.childNodes[ 1 ].getAttribute( "type" ) === "audio/mp4", "source[ 1 ] is correct type" );
+
+ start();
+
+});
Something went wrong with that request. Please try again.