Changeset 926

Timestamp:

04/09/10 13:38:07 (3 years ago)

Author:

zach

Message:

• Updating parsers
• Adding intelligent Flash failover

Location:

trunk/html5/src

Files:

• jquery.jwplayerCore.js (modified) (3 diffs)
• jquery.jwplayerParse.js (moved) (moved from trunk/html5/src/jquery.jwplayerUtilsParsers.js) (1 diff)
• jquery.jwplayerUtils.js (modified) (6 diffs)
• jquery.jwplayerUtilsParsersDOMElementParser.js (deleted)
• jquery.jwplayerUtilsParsersDOMMediaElementParser.js (deleted)
• jquery.jwplayerUtilsParsersDOMSourceElementParser.js (deleted)
• jquery.jwplayerUtilsParsersDOMVideoElementParser.js (deleted)
• jquery.jwplayerView.js (modified) (2 diffs)

trunk/html5/src/jquery.jwplayerCore.js

@@ -14 +14 @@
         return this.each(function() {
                 $(this).css("display","none");
-                var domConfig = $.fn.jwplayerUtilsParsersDOMElementParser.parse(this);
-                var model = $.extend(true, {}, $.fn.jwplayer.defaults, options, domConfig);
-                $(this).data("model", model);
+                $(this).jwplayerParse(options);
                 $(this).wrap("<div />");
-                $(this).before("<img src='" + model.image + "' style='width:" + model.width + "px,height:" + model.height + "px' />");
+                $(this).before("<img src='" + $(this).data("model").image + "' style='width:" + $(this).data("model").width + "px,height:" + $(this).data("model").height + "px' />");
                 $(this).prev("img").click($.fn.jwplayer.play);
                 // loadSkin(options);
         });
-}
+};
+
 
 $.fn.jwplayer.play = function(event) {
@@ -30 +29 @@
                 var source = model.sources[sourceIndex];
                 if (source.type == undefined) {
-                        source.type = 'video/' + source.file.substr(source.file.lastIndexOf('.')+1, source.file.length) + ';';
+                        source.type = 'video/' + $.fn.jwplayerUtils.extension(source.file) + ';';
                 }
                 if ($.fn.jwplayerUtils.supportsType(source.type)){
-                        $(event.target).remove();
-                        video.css("display","block");
+                        model.item = sourceIndex;
+                        $(event.target).css("display","none");
+                        video.css("display","inherit");
                         video[0].play();
                         model.state = 'playing';
-                        break;
-                }
-        } 
-        if ($.fn.jwplayerUtils.supportsFlash && model.state != 'playing'){
-                if (event != undefined) {
-                        $.fn.jwplayerView.embedFlash(video, model);
-                        $(event.target).remove();                       
+                        return true;
                 }
         }
-}
+        if ($.fn.jwplayerUtils.supportsFlash && model.state != 'playing'){
+                for (var sourceIndex in model.sources) {
+                        var source = model.sources[sourceIndex];
+                        $.fn.log($.fn.jwplayerUtils.flashCanPlay(source.file));
+                        if ($.fn.jwplayerUtils.flashCanPlay(source.file)){
+                                model.item = sourceIndex;
+                                $.fn.jwplayerView.embedFlash(video, model);
+                                $(event.target).css("display","none");
+                                return true;
+                        }
+                }                       
+        }
+        alert("No file to play!");
+        return false;
+};
+
 
 /** Map with all players on the page. **/
@@ -66 +75 @@
         top:0,
         volume:100,
-        width:400
+        width:400,
+        item:0
 };
 

trunk/html5/src/jquery.jwplayerParse.js

@@ -8 +8 @@
 (function($){
 
-$.fn.jwplayerUtilsParsers = function(){
+var elementAttributes = {
+        'element':{
+                'width':'width',
+                'height': 'height',
+                'id': 'id',
+                'class': 'className',
+                'name': 'name'
+        },
+        'media': {
+                'src': 'file',
+                'preload': 'preload', 
+                'autoplay': 'autostart',
+                'loop': 'repeat',
+                'controls': 'controls'
+        },
+        'source':{
+                'src': 'file',
+                'type': 'type',
+                'media': 'media'
+        },
+        'video': {
+                'poster': 'image'
+        }
 };
 
+var parsers = {
+}
+
+$.fn.jwplayerParse = function(options){
+        return this.each(function() {
+                $(this).data("model", $.extend(true, {}, $.fn.jwplayer.defaults, options, parseElement(this)));
+        });
+};
+
+function getAttributeList(attributes, elementType) {
+        if  (attributes == undefined) {
+                attributes = elementAttributes[elementType];
+        } else {
+                $.extend(attributes, elementAttributes[elementType]);
+        }
+        return attributes;
+}
+
+function parseElement(domElement, attributes) {
+        if (parsers[domElement.tagName.toLowerCase()] && (attributes == null)) {
+                return parsers[domElement.tagName.toLowerCase()](domElement);
+        } else {
+                attributes = getAttributeList(attributes, 'element');
+                var configuration = {};                 
+                for (var attribute in attributes) {
+                        if (attribute != "length") {
+                                var value = $(domElement).attr(attribute);
+                                if (!(value == "" || value == undefined)) {
+                                        configuration[attributes[attribute]] = $(domElement).attr(attribute);
+                                }
+                        }
+                }
+                return configuration;
+        }
+};
+
+function parseMediaElement(domElement, attributes) {
+        attributes = getAttributeList(attributes, 'media');
+        var sources = [];
+        $("source",domElement).each(function() {
+                sources[sources.length] = parseSourceElement(this);
+        });
+        var configuration = parseElement(domElement, attributes);
+        if (configuration['file'] != undefined) {
+                sources[0] = {'file':configuration['file']};
+        }
+        configuration['sources'] = sources;
+        return configuration;
+};
+
+function parseSourceElement(domElement, attributes) {
+        attributes = getAttributeList(attributes, 'source');
+        return parseElement(domElement, attributes);
+};
+
+function parseVideoElement(domElement, attributes) {
+        attributes = getAttributeList(attributes, 'video');
+        return parseMediaElement(domElement, attributes);
+}
+
+parsers['media'] = parseMediaElement;
+parsers['audio'] = parseMediaElement;
+parsers['source'] = parseSourceElement;
+parsers['video'] = parseVideoElement;
+
+
 })(jQuery);

trunk/html5/src/jquery.jwplayerUtils.js

@@ -9 +9 @@
 (function($){
 
+/** Constructor **/
 $.fn.jwplayerUtils = function(){
         return this.each(function() {
         });
-}
+};
 
 /** Check if this client supports Flash player 9.0.115+ (FLV/H264). **/
@@ -41 +42 @@
 };
 
-/** check if this client supports playback for the specified type. **/
+/** Filetypes supported by Flash **/
+var flashFileTypes = {
+        '3g2':true,
+        '3gp':true,
+        'aac':true,
+        'f4b':true,
+        'f4p':true,
+        'f4v':true,
+        'flv':true,
+        'gif':true,
+        'jpg':true,
+        'jpeg':true,
+        'm4a':true,
+        'm4v':true,
+        'mov':true,
+        'mp3':true,
+        'mp4':true,
+        'png':true,
+        'rbs':true,
+        'sdp':true,
+        'swf':true,
+        'vp6':true
+};
+
+
+/** Check if this client supports Flash player 9.0.115+ (FLV/H264). **/
+$.fn.jwplayerUtils.flashCanPlay = function(fileName) {
+        if (flashFileTypes[$.fn.jwplayerUtils.extension(fileName)]){
+                return true;
+        } 
+        return false;
+};
+
+/** Check if this client supports playback for the specified type. **/
 $.fn.jwplayerUtils.supportsType = function(type) {
         try { 
@@ -50 +84 @@
 };
 
-/** check if this client supports HTML5 H.264 playback. **/
+/** Check if this client supports HTML5 H.264 playback. **/
 $.fn.jwplayerUtils.supportsH264 = function() {
         return $.fn.jwplayerUtils.supportsType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
@@ -56 +90 @@
 
 
-/** check if this client supports HTML5 OGG playback. **/
+/** Check if this client supports HTML5 OGG playback. **/
 $.fn.jwplayerUtils.supportsOgg = function() {
         return $.fn.jwplayerUtils.supportsType('video/ogg; codecs="theora, vorbis"');
 };
 
+/** Returns the extension of a file name **/
+$.fn.jwplayerUtils.extension = function(path) {
+        return path.substr(path.lastIndexOf('.')+1, path.length);
+};
+
+/** Dumps the content of an object to a string **/
 $.fn.jwplayerUtils.dump = function(object, depth) {
         if (object == null) {
@@ -92 +132 @@
         return result;
 };
-        
+
+/** Returns the true type of an object **/      
 $.fn.jwplayerUtils.typeOf = function(value) {
         var s = typeof value;
@@ -108 +149 @@
 
 
+/** Logger **/
 $.fn.log = function (msg, obj) {
         try {
-                console.log("%s: %o", msg, obj);
+                if (obj) {
+                        console.log("%s: %o", msg, obj);
+                } else {
+                        console.log($.fn.jwplayerUtils.dump(msg));
+                }
         } catch (err) {
         }

trunk/html5/src/jquery.jwplayerView.js

@@ -23 +23 @@
                         "allowfullscreen='true' " + 
                         "allowscriptaccess='always' " + 
-                        "flashvars='file=" + model.sources[0].file + "&image=" + model.image + "' " + 
+                        "flashvars='file=" + model.sources[model.item].file + "&image=" + model.image + "' " + 
                         "/>"
                 );
@@ -32 +32 @@
                         "<param name='allowscriptaccess' value='always'>" + 
                         "<param name='wmode' value='transparent'>" + 
-                        "<param name='flashvars' value='file=" + model.sources[0].file + "&image=" + model.image + "'>" + 
+                        "<param name='flashvars' value='file=" + model.sources[model.item].file + "&image=" + model.image + "'>" + 
                         "</object>"
                 );