Changeset 1262


Ignore:
Timestamp:
09/01/10 19:05:29 (3 years ago)
Author:
pablo
Message:

Fixes a bug in the setup process, and sets the default player for an empty setup() call to the html5 player

Location:
trunk/js
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/js/bin-debug/jwplayer.js

    r1261 r1262  
    311311 
    312312        jwplayer.api.events = { 
     313                API_READY: 'jwplayerAPIReady', 
    313314                JWPLAYER_READY: 'jwplayerReady', 
    314315                JWPLAYER_FULLSCREEN: 'jwplayerFullscreen', 
    … …  
    342343                var _listeners = {}; 
    343344                var _stateListeners = {}; 
     345                var _readyListeners = []; 
    344346                var _player = undefined; 
    345347                var _playerReady = false; 
    346348                var _queuedCalls = []; 
     349                 
     350                var _originalHTML = container.outerHTML; 
    347351                 
    348352                var _itemMeta = {}; 
    … …  
    407411                        } 
    408412                }; 
    409                  
     413 
    410414                function translateEventResponse(type, eventProperties) { 
    411415                        var translated = jwplayer.utils.extend({}, eventProperties); 
    … …  
    455459                        }); 
    456460 
    457                         this.dispatchEvent.call(this, "jwplayerReady", obj); 
     461                        this.dispatchEvent(jwplayer.api.events.API_READY); 
    458462                         
    459463                        while (_queuedCalls.length > 0) { 
    … …  
    467471                }; 
    468472                 
    469                 this.removeListeners = function() { 
     473                this.destroy = function() { 
    470474                        _listeners = {}; 
    471                         _queuedCalls = {}; 
     475                        _queuedCalls = []; 
     476                        jwplayer.api.destroyPlayer(this.id, _originalHTML);  
    472477                }; 
    473478                 
    … …  
    563568                onPlaylist: function(callback) { return this.eventListener(jwplayer.api.events.JWPLAYER_PLAYLIST_LOADED, callback); }, 
    564569                onPlaylistItem: function(callback) { return this.eventListener(jwplayer.api.events.JWPLAYER_PLAYLIST_ITEM, callback); }, 
    565                 onReady: function(callback) { return this.eventListener(jwplayer.api.events.JWPLAYER_READY, callback); }, 
     570                onReady: function(callback) { return this.eventListener(jwplayer.api.events.API_READY, callback); }, 
    566571                onResize: function(callback) { return this.eventListener(jwplayer.api.events.JWPLAYER_RESIZE, callback); }, 
    567572                onComplete: function(callback) { return this.eventListener(jwplayer.api.events.JWPLAYER_MEDIA_COMPLETE, callback); }, 
    … …  
    577582                setup: function(options) { return this; }, 
    578583                remove: function() { 
    579                         this.removeListeners(); 
    580                         jwplayer.api.destroyPlayer(this.id);  
     584                        this.destroy(); 
    581585                },  
    582586                 
    … …  
    633637        }; 
    634638         
    635         jwplayer.api.destroyPlayer = function(playerId) { 
     639        jwplayer.api.destroyPlayer = function(playerId, replacementHTML) { 
    636640                var index = -1; 
    637641                for(var p in _players) { 
    … …  
    643647                if (index >= 0) { 
    644648                        var toDestroy = document.getElementById(_players[index].id); 
    645                         var replacement = document.createElement('div'); 
    646                         replacement.setAttribute('id', toDestroy.id); 
    647                         toDestroy.parentNode.replaceChild(replacement, toDestroy); 
     649                        if (toDestroy) { 
     650                                if (replacementHTML) { 
     651                                        toDestroy.outerHTML = replacementHTML; 
     652                                } else { 
     653                                        var replacement = document.createElement('div'); 
     654                                        replacement.setAttribute('id', toDestroy.id); 
     655                                        toDestroy.parentNode.replaceChild(replacement, toDestroy); 
     656                                } 
     657                        } 
    648658                        _players.splice(index, 1); 
    649659                } 
    … …  
    675685 
    676686        jwplayer.embed.Embedder = function(playerApi) { 
    677                 var events = {},  
    678                         players = {},  
    679                         config = undefined,  
    680                         api = undefined; 
    681687                this.constructor(playerApi); 
    682688        }; 
    683  
     689         
    684690        jwplayer.embed.Embedder.prototype = { 
     691                config: undefined,  
     692                api: undefined, 
     693                events: {}, 
     694                players: [{type:'html5'}], 
     695 
    685696                constructor : function(playerApi) { 
    686697                        this.api = playerApi; 
    … …  
    748759                                } else if (loadParams.levels) { 
    749760                                        var item = this.getPlaylistItem(0); 
     761                                        if (!item) { 
     762                                                item = { file: loadParams.levels[0].file }; 
     763                                        } 
    750764                                        item.levels = loadParams.levels; 
    751765                                        this.load(item); 
    … …  
    796810                // flashvars. 
    797811                if (params.levels && params.levels.length && params.file === undefined) { 
    798                         params.file = params.levels[0]['file']; 
     812//                      params.file = params.levels[0]['file']; 
    799813                } 
    800814 
    … …  
    843857                if (jwplayer.html5) { 
    844858                        container.innerHTML = "<p>Embedded HTML5 player goes here</p>"; 
    845                         var playerOptions = jwplayer.utils.extend( {}, jwplayer.embed.defaults, options); 
     859                        var playerOptions = jwplayer.utils.extend( {screencolor:'0x000000'}, jwplayer.embed.defaults, options); 
    846860                        jwplayer.embed.parseConfigBlock(playerOptions, 'components'); 
    847861                        // TODO: remove this requirement from the html5 player (sources 
    … …  
    916930                        } 
    917931                } 
    918                 this.config = options; 
    919                 return (new jwplayer.embed.Embedder(this)).embedPlayer(); 
     932                 
     933                // Destroy original API on setup() to remove existing listeners 
     934                var newId = this.id; 
     935                this.remove(); 
     936                var newApi = jwplayer(newId); 
     937                newApi.config = options; 
     938                return (new jwplayer.embed.Embedder(newApi)).embedPlayer(); 
    920939        }; 
    921940 

  • trunk/js/src/api/jwplayer.api.js

    r1261 r1262  
    99 
    1010        jwplayer.api.events = { 
     11                API_READY: 'jwplayerAPIReady', 
    1112                JWPLAYER_READY: 'jwplayerReady', 
    1213                JWPLAYER_FULLSCREEN: 'jwplayerFullscreen', 
    … …  
    4041                var _listeners = {}; 
    4142                var _stateListeners = {}; 
     43                var _readyListeners = []; 
    4244                var _player = undefined; 
    4345                var _playerReady = false; 
    4446                var _queuedCalls = []; 
     47                 
     48                var _originalHTML = container.outerHTML; 
    4549                 
    4650                var _itemMeta = {}; 
    … …  
    105109                        } 
    106110                }; 
    107                  
     111 
    108112                function translateEventResponse(type, eventProperties) { 
    109113                        var translated = jwplayer.utils.extend({}, eventProperties); 
    … …  
    153157                        }); 
    154158 
    155                         this.dispatchEvent.call(this, "jwplayerReady", obj); 
     159                        this.dispatchEvent(jwplayer.api.events.API_READY); 
    156160                         
    157161                        while (_queuedCalls.length > 0) { 
    … …  
    165169                }; 
    166170                 
    167                 this.removeListeners = function() { 
     171                this.destroy = function() { 
    168172                        _listeners = {}; 
    169                         _queuedCalls = {}; 
     173                        _queuedCalls = []; 
     174                        jwplayer.api.destroyPlayer(this.id, _originalHTML);  
    170175                }; 
    171176                 
    … …  
    261266                onPlaylist: function(callback) { return this.eventListener(jwplayer.api.events.JWPLAYER_PLAYLIST_LOADED, callback); }, 
    262267                onPlaylistItem: function(callback) { return this.eventListener(jwplayer.api.events.JWPLAYER_PLAYLIST_ITEM, callback); }, 
    263                 onReady: function(callback) { return this.eventListener(jwplayer.api.events.JWPLAYER_READY, callback); }, 
     268                onReady: function(callback) { return this.eventListener(jwplayer.api.events.API_READY, callback); }, 
    264269                onResize: function(callback) { return this.eventListener(jwplayer.api.events.JWPLAYER_RESIZE, callback); }, 
    265270                onComplete: function(callback) { return this.eventListener(jwplayer.api.events.JWPLAYER_MEDIA_COMPLETE, callback); }, 
    … …  
    275280                setup: function(options) { return this; }, 
    276281                remove: function() { 
    277                         this.removeListeners(); 
    278                         jwplayer.api.destroyPlayer(this.id);  
     282                        this.destroy(); 
    279283                },  
    280284                 
    … …  
    331335        }; 
    332336         
    333         jwplayer.api.destroyPlayer = function(playerId) { 
     337        jwplayer.api.destroyPlayer = function(playerId, replacementHTML) { 
    334338                var index = -1; 
    335339                for(var p in _players) { 
    … …  
    341345                if (index >= 0) { 
    342346                        var toDestroy = document.getElementById(_players[index].id); 
    343                         var replacement = document.createElement('div'); 
    344                         replacement.setAttribute('id', toDestroy.id); 
    345                         toDestroy.parentNode.replaceChild(replacement, toDestroy); 
     347                        if (toDestroy) { 
     348                                if (replacementHTML) { 
     349                                        toDestroy.outerHTML = replacementHTML; 
     350                                } else { 
     351                                        var replacement = document.createElement('div'); 
     352                                        replacement.setAttribute('id', toDestroy.id); 
     353                                        toDestroy.parentNode.replaceChild(replacement, toDestroy); 
     354                                } 
     355                        } 
    346356                        _players.splice(index, 1); 
    347357                } 

  • trunk/js/src/embed/jwplayer.embed.js

    r1261 r1262  
    55 
    66        jwplayer.embed.Embedder = function(playerApi) { 
    7                 var events = {},  
    8                         players = {},  
    9                         config = undefined,  
    10                         api = undefined; 
    117                this.constructor(playerApi); 
    128        }; 
    13  
     9         
    1410        jwplayer.embed.Embedder.prototype = { 
     11                config: undefined,  
     12                api: undefined, 
     13                events: {}, 
     14                players: [{type:'html5'}], 
     15 
    1516                constructor : function(playerApi) { 
    1617                        this.api = playerApi; 
    … …  
    7879                                } else if (loadParams.levels) { 
    7980                                        var item = this.getPlaylistItem(0); 
     81                                        if (!item) { 
     82                                                item = { file: loadParams.levels[0].file }; 
     83                                        } 
    8084                                        item.levels = loadParams.levels; 
    8185                                        this.load(item); 
    … …  
    126130                // flashvars. 
    127131                if (params.levels && params.levels.length && params.file === undefined) { 
    128                         params.file = params.levels[0]['file']; 
     132//                      params.file = params.levels[0]['file']; 
    129133                } 
    130134 
    … …  
    173177                if (jwplayer.html5) { 
    174178                        container.innerHTML = "<p>Embedded HTML5 player goes here</p>"; 
    175                         var playerOptions = jwplayer.utils.extend( {}, jwplayer.embed.defaults, options); 
     179                        var playerOptions = jwplayer.utils.extend( {screencolor:'0x000000'}, jwplayer.embed.defaults, options); 
    176180                        jwplayer.embed.parseConfigBlock(playerOptions, 'components'); 
    177181                        // TODO: remove this requirement from the html5 player (sources 
    … …  
    246250                        } 
    247251                } 
    248                 this.config = options; 
    249                 return (new jwplayer.embed.Embedder(this)).embedPlayer(); 
     252                 
     253                // Destroy original API on setup() to remove existing listeners 
     254                var newId = this.id; 
     255                this.remove(); 
     256                var newApi = jwplayer(newId); 
     257                newApi.config = options; 
     258                return (new jwplayer.embed.Embedder(newApi)).embedPlayer(); 
    250259        }; 
    251260 

  • trunk/js/test/embed.html

    r1235 r1262  
    11<html> 
    22        <head> 
    3                 <script type="text/javascript" src="jquery.js"></script> 
    4                 <script type="text/javascript" src="jwplayer.js"></script> 
     3                <script type="text/javascript" src="../bin-debug/jwplayer.js"></script> 
    54                <script type="text/javascript" src="jwplayer.html5.js"></script> 
    65                <script type="text/javascript"> 
    76                        var options = { 
    87                                image:          '../../../testing/files/bunny.jpg', 
    9                                 players: [ 
    10                                         {type:'flash', src: '../../../trunk/fl5/player.swf'}, 
    11                                         {type:'html5'}, 
    12                                 ], 
    138                                skin: '', 
    149                                levels: [ 
    … …  
    1712                        };  
    1813                        function embedPlayer(id) { 
    19                                 $jw(id).setup(options).play().onPlay(function() { 
     14                                $jw(id).setup(options, '../../../trunk/fl5/player.swf').onPlay(function() { 
    2015                                        alert("Playing!"); 
    21                                 }); 
     16                                }).play(); 
    2217                        }        
    2318                </script> 
    … …  
    3429                        </div> 
    3530                </div> 
    36                 <h3>Embed a player</h3> 
     31                <h3>Embed a player on a div</h3> 
    3732                <a href="#" onclick="embedPlayer('div1'); return false;">Click here to embed player</a><br /> 
    38  
     33                <h3>Embed a player on a video tag</h3> 
     34                <div> 
     35                        <video id="a_video" src="/testing/files/bunny.mp4" width="320" height="240" poster="/testing/files/bunny.png"></video> 
     36                </div> 
     37                <a href="#" onclick="console.log($jw('a_video').setup().options); return false;">Click here to embed player</a><br /> 
    3938        </body> 
    4039</html> 

  • trunk/js/test/jwplayer.html5.js

    r1235 r1262  
    2929 
    3030        jwplayer.html5.utils = function() { 
    31                 return this.each(function() { 
    32                 }); 
    33         }; 
    34          
    35          
     31        }; 
    3632         
    3733        /** Returns the extension of a file name **/ 
    3834        jwplayer.html5.utils.extension = function(path) { 
    39                 return path.substr(path.lastIndexOf('.') + 1, path.length); 
    40         }; 
    41          
    42         jwplayer.html5.utils.isNull = function(obj) { 
    43                 return ((obj === null) || (obj === undefined) || (obj === "")); 
     35                return path.substr(path.lastIndexOf('.') + 1, path.length).toLowerCase(); 
    4436        }; 
    4537         
    4638        /** Gets an absolute file path based on a relative filepath **/ 
    4739        jwplayer.html5.utils.getAbsolutePath = function(path) { 
    48                 if (jwplayer.html5.utils.isNull(path)) { 
    49                         return path; 
     40                if (path === undefined) { 
     41                        return undefined; 
    5042                } 
    5143                if (isAbsolutePath(path)) { 
    … …  
    5850                var result = []; 
    5951                for (var i = 0; i < patharray.length; i++) { 
    60                         if (jwplayer.html5.utils.isNull(patharray[i]) || patharray[i] == ".") { 
     52                        if (patharray[i] === undefined || patharray[i] == ".") { 
    6153                                continue; 
    6254                        } else if (patharray[i] == "..") { 
    … …  
    7062         
    7163        function isAbsolutePath(path) { 
    72                 if (jwplayer.html5.utils.isNull(path)) { 
     64                if (path === null) { 
    7365                        return; 
    7466                } 
    … …  
    9486        }; 
    9587         
    96          
    97         /** Dumps the content of an object to a string **/ 
    98         jwplayer.html5.utils.dump = function(object, depth) { 
    99                 if (object === null) { 
    100                         return 'null'; 
    101                 } else if (jwplayer.html5.utils.typeOf(object) != 'object') { 
    102                         if (jwplayer.html5.utils.typeOf(object) == 'string') { 
    103                                 return "\"" + object + "\""; 
    104                         } 
    105                         return object; 
    106                 } 
    107                  
    108                 var type = jwplayer.html5.utils.typeOf(object); 
    109                  
    110                 depth = (depth === undefined) ? 1 : depth + 1; 
    111                 var indent = ""; 
    112                 for (var indentCount = 0; indentCount < depth; indentCount++) { 
    113                         indent += "\t"; 
    114                 } 
    115                  
    116                 var result = (type == "array") ? "[" : "{"; 
    117                 result += "\n" + indent; 
    118                  
    119                 for (var key in object) { 
    120                         if (type == "object") { 
    121                                 result += "\"" + key + "\": "; 
    122                         } 
    123                         result += jwplayer.html5.utils.dump(object[key], depth) + ",\n" + indent; 
    124                 } 
    125                  
    126                 result = result.substring(0, result.length - 2 - depth) + "\n"; 
    127                  
    128                 result += indent.substring(0, indent.length - 1); 
    129                 result += (type == "array") ? "]" : "}"; 
    130                  
    131                 return result; 
    132         }; 
    133          
    134         /** Returns the true type of an object **/ 
    135         jwplayer.html5.utils.typeOf = function(value) { 
    136                 var s = typeof value; 
    137                 if (s === 'object') { 
    138                         if (value) { 
    139                                 if (value instanceof Array) { 
    140                                         s = 'array'; 
    141                                 } 
    142                         } else { 
    143                                 s = 'null'; 
    144                         } 
    145                 } 
    146                 return s; 
    147         }; 
    148          
    149          
    15088        /** Logger **/ 
    15189        jwplayer.html5.utils.log = function(msg, obj) { 
    152                 //try { 
    15390                if (obj) { 
    154                         console.log("%s: %o", msg, obj); 
     91                        obj.message = msg; 
     92                        console.log(obj); 
    15593                } else { 
    156                         console.log(jwplayer.html5.utils.dump(msg)); 
    157                 } 
    158                 //} catch (err) { 
    159                 //} 
     94                        console.log(msg); 
     95                } 
    16096                return this; 
    16197        }; 
    16298         
    16399        jwplayer.html5.utils.css = function(domelement, styles) { 
    164                 if (domelement !== null) { 
     100                if (domelement !== undefined) { 
    165101                        for (var style in styles) { 
    166102                                try { 
    … …  
    171107                        } 
    172108                } 
     109        }; 
     110})(jwplayer); 
     111/** 
     112 * JW Player view component 
     113 * 
     114 * @author zach 
     115 * @version 1.0 
     116 */ 
     117(function(jwplayer) { 
     118 
     119        var _css = jwplayer.html5.utils.css; 
     120         
     121        jwplayer.html5.view = function(api, container, model) { 
     122                var _container; 
     123                var _wrapper; 
     124                var _zindex = 0; 
     125                var _box = { 
     126                        top: 0, 
     127                        right: 0, 
     128                        bottom: 0, 
     129                        left: 0 
     130                }; 
     131                 
     132                function createWrapper() { 
     133                        _wrapper = document.createElement("div"); 
     134                        _wrapper.id = _container.id; 
     135                        _container.id = _wrapper.id + "_video"; 
     136                         
     137                        _css(_wrapper, { 
     138                                position: 'relative', 
     139                                height: model.config.height + 'px', 
     140                                width: model.config.width + 'px', 
     141                                margin: 'auto', 
     142                                padding: 0, 
     143                                background_color: model.config.screencolor, 
     144                                z_index: getNextZIndex() 
     145                        }); 
     146                         
     147                        _css(_container, { 
     148                                position: 'absolute', 
     149                                width: model.config.width + 'px', 
     150                                height: model.config.height + 'px', 
     151                                top: 0, 
     152                                left: 0, 
     153                                z_index: 1, 
     154                                margin: 'auto', 
     155                                display: 'block' 
     156                        }); 
     157                         
     158                        jwplayer.utils.wrap(_container, _wrapper); 
     159                } 
     160                 
     161                function getNextZIndex() { 
     162                        return _zindex++; 
     163                } 
     164                 
     165                function layoutComponents() { 
     166                        if (model.getMedia() !== undefined && !model.getMedia().hasChrome && !model.config.chromeless) { 
     167                                for (var pluginIndex in model.plugins.order) { 
     168                                        var pluginName = model.plugins.order[pluginIndex]; 
     169                                        if (model.plugins.object[pluginName].getDisplayElement !== undefined) { 
     170                                                var plugincss = { 
     171                                                        position: 'absolute', 
     172                                                        z_index: getNextZIndex(), 
     173                                                        margin: 0, 
     174                                                        padding: 0 
     175                                                }; 
     176                                                var elementWidth, elementHeight; 
     177                                                switch (model.plugins.config[pluginName].position.toUpperCase()) { 
     178                                                        case jwplayer.html5.view.positions.OVER: 
     179                                                                break; 
     180                                                        case jwplayer.html5.view.positions.TOP: 
     181                                                                plugincss.top = 0; 
     182                                                                elementHeight = getNumber(model.plugins.object[pluginName].getDisplayElement().style.height); 
     183                                                                _box.top += elementHeight; 
     184                                                                for (var childNode in _wrapper.childNodes) { 
     185                                                                        if (!isNaN(parseInt(childNode, 10))) { 
     186                                                                                _wrapper.childNodes[childNode].style.height = getNumber(_wrapper.childNodes[childNode].style.height) - elementHeight ; 
     187                                                                                _wrapper.childNodes[childNode].style.top = getNumber(_wrapper.childNodes[childNode].style.top) + elementHeight; 
     188                                                                        } 
     189                                                                } 
     190                                                                break; 
     191                                                        case jwplayer.html5.view.positions.RIGHT: 
     192                                                                elementWidth = getNumber(model.plugins.object[pluginName].getDisplayElement().style.width); 
     193                                                                _box.right += elementWidth; 
     194                                                                break; 
     195                                                        case jwplayer.html5.view.positions.BOTTOM: 
     196                                                                elementHeight = getNumber(model.plugins.object[pluginName].getDisplayElement().style.height); 
     197                                                                plugincss.top = getNumber(_wrapper.style.height) - elementHeight - _box.bottom; 
     198                                                                _box.bottom += elementHeight; 
     199                                                                break; 
     200                                                        case jwplayer.html5.view.positions.LEFT: 
     201                                                                elementWidth = getNumber(model.plugins.object[pluginName].getDisplayElement().style.width); 
     202                                                                _box.left += elementWidth; 
     203                                                                break; 
     204                                                } 
     205                                                _container.parentNode.appendChild(model.plugins.object[pluginName].getDisplayElement()); 
     206                                                _css(model.plugins.object[pluginName].getDisplayElement(), plugincss); 
     207                                        } 
     208                                } 
     209                        } else { 
     210                                model.getMedia().getDisplayElement().poster = model.playlist[model.item].image; 
     211                                model.getMedia().getDisplayElement().controls = "controls"; 
     212                        } 
     213                } 
     214                 
     215                function getNumber(style) { 
     216                        if (style === "") { 
     217                                return 0; 
     218                        } 
     219                        return parseInt(style.replace("px", ""), 10); 
     220                } 
     221                 
     222                this.setup = function(container) { 
     223                        _container = container; 
     224                        createWrapper(); 
     225                        layoutComponents(); 
     226                        this.resize(model.config.width, model.config.height); 
     227                }; 
     228                 
     229                this.resize = function(width, height) { 
     230                        for (var pluginIndex in model.plugins.order) { 
     231                                var pluginName = model.plugins.order[pluginIndex]; 
     232                                if (model.plugins.config[pluginName].position == jwplayer.html5.view.positions.OVER && !api.jwGetFullscreen()){ 
     233                                        model.plugins.object[pluginName].resize(model.width - _box.left - _box.right, model.height - _box.top - _box.bottom); 
     234                                } else { 
     235                                        model.plugins.object[pluginName].resize(width, height); 
     236                                } 
     237                        } 
     238                        _css(model.getMedia().getDisplayElement(), { 
     239                                position: 'absolute', 
     240                                width: (api.jwGetFullscreen() ? model.width : model.width - _box.left - _box.right), 
     241                                height:  (api.jwGetFullscreen() ? model.height : model.height - _box.top - _box.bottom), 
     242                                top: _box.top, 
     243                                left: _box.left 
     244                        }); 
     245                }; 
     246                 
     247        }; 
     248         
     249        jwplayer.html5.view.positions = { 
     250                TOP: "TOP", 
     251                RIGHT: "RIGHT", 
     252                BOTTOM: "BOTTOM", 
     253                LEFT: "LEFT", 
     254                OVER: "OVER" 
    173255        }; 
    174256})(jwplayer); 
    … …  
    180262 */ 
    181263(function(jwplayer) { 
    182         var _positions = { 
    183                 BOTTOM: "BOTTOM", 
    184                 TOP: "TOP", 
    185                 OVER: "OVER" 
    186         }; 
    187          
    188          
    189264        /** Map with config for the jwplayerControlbar plugin. **/ 
    190265        var _defaults = { 
    … …  
    199274                fontweight: "bold", 
    200275                buttoncolor: "ffffff", 
    201                 position: _positions.BOTTOM, 
    202                 leftmargin: 0, 
    203                 rightmargin: 0, 
    204                 scrubber: "none" 
     276                position: jwplayer.html5.view.positions.BOTTOM, 
     277                layout: { 
     278                        "left": { 
     279                                "position": "left", 
     280                                "elements": [{ 
     281                                        "name": "play", 
     282                                        "type": "button" 
     283                                }, { 
     284                                        "name": "divider", 
     285                                        "type": "divider" 
     286                                }, { 
     287                                        "name": "prev", 
     288                                        "type": "button" 
     289                                }, { 
     290                                        "name": "divider", 
     291                                        "type": "divider" 
     292                                }, { 
     293                                        "name": "next", 
     294                                        "type": "button" 
     295                                }, { 
     296                                        "name": "divider", 
     297                                        "type": "divider" 
     298                                }, { 
     299                                        "name": "elapsed", 
     300                                        "type": "text" 
     301                                }] 
     302                        }, 
     303                        "center": { 
     304                                "position": "center", 
     305                                "elements": [{ 
     306                                        "name": "time", 
     307                                        "type": "slider" 
     308                                }] 
     309                        }, 
     310                        "right": { 
     311                                "position": "right", 
     312                                "elements": [{ 
     313                                        "name": "duration", 
     314                                        "type": "text" 
     315                                }, { 
     316                                        "name": "divider", 
     317                                        "type": "divider" 
     318                                }, { 
     319                                        "name": "blank", 
     320                                        "type": "button" 
     321                                }, { 
     322                                        "name": "fullscreen", 
     323                                        "type": "button" 
     324                                }, { 
     325                                        "name": "divider", 
     326                                        "type": "divider" 
     327                                }, { 
     328                                        "name": "mute", 
     329                                        "type": "button" 
     330                                }, { 
     331                                        "name": "volume", 
     332                                        "type": "slider" 
     333                                }] 
     334                        } 
     335                } 
    205336        }; 
    206337         
    … …  
    219350        }; 
    220351         
    221         jwplayer.html5.controlbar = function(api, container) { 
    222                 var _container = container; 
    223                 var _api = api; 
    224                 var _settings = jwplayer.utils.extend({}, _defaults, api.skin.getComponentSettings("controlbar")); 
    225                 var _domelement; 
     352        jwplayer.html5.controlbar = function(api, config) { 
     353                var _settings = jwplayer.utils.extend({}, _defaults, api.skin.getComponentSettings("controlbar"), config); 
     354                if (jwplayer.html5.utils.mapLength(api.skin.getComponentLayout("controlbar")) > 0) { 
     355                        _settings.layout = api.skin.getComponentLayout("controlbar"); 
     356                } 
     357                var _wrapper; 
     358                var _dividerid = 0; 
     359                var _marginleft = 0; 
     360                var _marginright = 0; 
     361                var _scrubber = "none"; 
     362                var _mousedown; 
     363                var _currentPosition; 
     364                var _currentDuration; 
     365                var _currentBuffer; 
     366                var _fullscreen; 
     367                var _width; 
     368                var _height; 
     369                var _prevElement; 
     370                var _elements = {}; 
     371                 
     372                 
     373                function _buildBase() { 
     374                        var wrappercss = { 
     375                                height: api.skin.getSkinElement("controlbar", "background").height, 
     376                                background_color: "#" + _settings.backgroundcolor 
     377                        }; 
     378                         
     379                        _wrapper = document.createElement("div"); 
     380                        _wrapper.id = api.id + "_jwplayer_controlbar"; 
     381                        _css(_wrapper, wrappercss); 
     382                         
     383                        _addElement("capLeft", "left", false, _wrapper); 
     384                        var domelmentcss = { 
     385                                position: "absolute", 
     386                                height: api.skin.getSkinElement("controlbar", "background").height, 
     387                                background: " url(" + api.skin.getSkinElement("controlbar", "background").src + ") repeat-x center left", 
     388                                left: api.skin.getSkinElement("controlbar", "capLeft").width 
     389                        }; 
     390                        _appendNewElement("elements", _wrapper, domelmentcss); 
     391                        _addElement("capRight", "right", false, _wrapper); 
     392                } 
     393                 
     394                this.getDisplayElement = function() { 
     395                        return _wrapper; 
     396                }; 
     397                 
     398                this.resize = function(width, height) { 
     399                        _width = width; 
     400                        _height = height; 
     401                        _fullscreen = api.jwGetFullscreen(); 
     402                        if (_fullscreen) { 
     403                                _show(_elements.normalscreenButton); 
     404                                _hide(_elements.fullscreenButton); 
     405                                // TODO 
     406                                if (false) { 
     407                                        window.onresize(function() { 
     408                                                _resizeBar(); 
     409                                        }); 
     410                                } 
     411                        } else { 
     412                                _hide(_elements.normalscreenButton); 
     413                                _show(_elements.fullscreenButton); 
     414                                // TODO 
     415                                if (false) { 
     416                                        window.onresize(null); 
     417                                } 
     418                        } 
     419                        _resizeBar(); 
     420                        _timeHandler({}); 
     421                        _bufferHandler({}); 
     422                }; 
     423                 
     424                function _appendNewElement(id, parent, css) { 
     425                        var element = document.createElement("div"); 
     426                        _elements[id] = element; 
     427                        element.id = _wrapper.id + "_" + id; 
     428                        parent.appendChild(element); 
     429                        if (css !== undefined) { 
     430                                _css(element, css); 
     431                        } 
     432                        return element; 
     433                } 
    226434                 
    227435                /** Draw the jwplayerControlbar elements. **/ 
    228436                function _buildElements() { 
    229                         // Draw the background. 
    230                         _domelement = document.createElement("div"); 
    231                         _domelement.id = _api.id + "_jwplayer_controlbar"; 
    232                         _container.parentNode.appendChild(_domelement); 
    233                         var controlbarcss = { 
    234                                 position: "absolute", 
    235                                 height: _api.skin.getSkinElement("controlbar", "background").height, 
    236                                 background: " url(" + _api.skin.getSkinElement("controlbar", "background").src + ") repeat-x center left", 
    237                                 background_color:  "#"+_settings.backgroundcolor 
    238                         }; 
    239                         switch (_settings.position) { 
    240                                 case _positions.TOP: 
    241                                         controlbarcss.top = 0; 
     437                        _buildGroup(_settings.layout.left); 
     438                        _buildGroup(_settings.layout.right, -1); 
     439                        _buildGroup(_settings.layout.center); 
     440                } 
     441                 
     442                /** Layout a group of elements**/ 
     443                function _buildGroup(group, order) { 
     444                        var alignment = group.position == "right" ? "right" : "left"; 
     445                        var elements = jwplayer.utils.extend([], group.elements); 
     446                        if (order !== undefined) { 
     447                                elements.reverse(); 
     448                        } 
     449                        for (var i = 0; i < elements.length; i++) { 
     450                                _buildElement(elements[i], alignment); 
     451                        } 
     452                } 
     453                 
     454                function getNewDivivderId() { 
     455                        return _dividerid++; 
     456                } 
     457                 
     458                /** Draw a single element into the jwplayerControlbar. **/ 
     459                function _buildElement(element, alignment) { 
     460                        switch (element.name) { 
     461                                case "play": 
     462                                        _addElement("playButton", alignment, false); 
     463                                        _addElement("pauseButton", alignment, true); 
     464                                        _buildHandler("playButton", "jwPlay"); 
     465                                        _buildHandler("pauseButton", "jwPause"); 
    242466                                        break; 
    243                                 default: 
    244                                         controlbarcss.top = _api.jwGetHeight(); 
    245                                         _css(_domelement.parentNode, { 
    246                                                 "height": parseInt(_domelement.parentNode.style.height.replace("px", ""), 10) + _api.skin.getSkinElement("controlbar", "background").height 
    247                                         }); 
     467                                case "divider": 
     468                                        _addElement("divider" + getNewDivivderId(), alignment, true); 
    248469                                        break; 
    249                         } 
    250                          
    251                         _css(_domelement, controlbarcss); 
    252                          
    253                          
    254                         // Draw all elements on top of the bar. 
    255                         _buildElement("capLeft", "left", true); 
    256                         _buildElement("playButton", "left", false); 
    257                         _buildElement("pauseButton", "left", true); 
    258                         _buildElement("divider1", "left", true); 
    259                         _buildElement("prevButton", "left", true); 
    260                         _buildElement("divider2", "left", true); 
    261                         _buildElement("nextButton", "left", true); 
    262                         _buildElement("divider3", "left", true); 
    263                         _buildElement("elapsedText", "left", true); 
    264                         _buildElement("timeSliderCapLeft", "left", true); 
    265                         _buildElement("timeSliderRail", "left", false); 
    266                         _buildElement("timeSliderBuffer", "left", false); 
    267                         _buildElement("timeSliderProgress", "left", false); 
    268                         _buildElement("timeSliderThumb", "left", false); 
    269                         _buildElement("timeSliderCapRight", "left", true); 
    270                         _buildElement("capRight", "right", true); 
    271                         // TODO 
    272                         if (false) { 
    273                                 _buildElement("fullscreenButton", "right", false); 
    274                                 _buildElement("normalscreenButton", "right", true); 
    275                                 _buildElement("divider4", "right", true); 
    276                         } 
    277                         _buildElement("volumeSliderCapLeft", "right", true); 
    278                         _buildElement("volumeSliderRail", "right", false); 
    279                         _buildElement("volumeSliderProgress", "right", true); 
    280                         _buildElement("volumeSliderCapRight", "right", true); 
    281                         _buildElement("muteButton", "right", false); 
    282                         _buildElement("unmuteButton", "right", true); 
    283                         _buildElement("divider5", "right", true); 
    284                         _buildElement("durationText", "right", true); 
    285                 } 
    286                  
    287                  
    288                 /** Draw a single element into the jwplayerControlbar. **/ 
    289                 function _buildElement(element, align, offset) { 
    290                         if (_api.skin.getSkinElement("controlbar", element) !== undefined || element.indexOf("Text") > 0 || element.indexOf("divider") === 0) { 
    291                                 var _element = document.createElement("div"); 
    292                                 _element.id = _domelement.id + "_" + element; 
    293                                 _domelement.appendChild(_element); 
     470                                case "prev": 
     471                                        if (api.jwGetPlaylist().length > 1) { 
     472                                                _addElement("prevButton", alignment, true); 
     473                                                _buildHandler("prevButton", "jwPlaylistPrev"); 
     474                                        } 
     475                                        break; 
     476                                case "next": 
     477                                        if (api.jwGetPlaylist().length > 1) { 
     478                                                _addElement("nextButton", alignment, true); 
     479                                                _buildHandler("nextButton", "jwPlaylistNext"); 
     480                                        } 
     481                                        break; 
     482                                case "elapsed": 
     483                                        _addElement("elapsedText", alignment, true); 
     484                                        break; 
     485                                case "time": 
     486                                        var offsetLeft = api.skin.getSkinElement("controlbar", "timeSliderCapLeft") === undefined ? 0 : api.skin.getSkinElement("controlbar", "timeSliderCapLeft").width; 
     487                                        var offsetRight = api.skin.getSkinElement("controlbar", "timeSliderCapRight") === undefined ? 0 : api.skin.getSkinElement("controlbar", "timeSliderCapRight").width; 
     488                                        var offset = alignment == "left" ? offsetLeft : offsetRight; 
     489                                        var width = api.skin.getSkinElement("controlbar", "timeSliderRail").width + offsetLeft + offsetRight; 
     490                                        var slidercss = { 
     491                                                height: api.skin.getSkinElement("controlbar", "background").height, 
     492                                                position: "absolute", 
     493                                                top: "0px", 
     494                                                width: width 
     495                                        }; 
     496                                        slidercss[alignment] = alignment == "left" ? _marginleft : _marginright; 
     497                                        var _timeslider = _appendNewElement("timeSlider", _elements.elements, slidercss); 
     498                                        _addElement("timeSliderCapLeft", alignment, true, _timeslider, alignment == "left" ? 0 : offset); 
     499                                        _addElement("timeSliderRail", alignment, false, _timeslider, offset); 
     500                                        _addElement("timeSliderBuffer", alignment, false, _timeslider, offset); 
     501                                        _addElement("timeSliderProgress", alignment, false, _timeslider, offset); 
     502                                        _addElement("timeSliderThumb", alignment, false, _timeslider, offset); 
     503                                        _addElement("timeSliderCapRight", alignment, true, _timeslider, alignment == "right" ? 0 : offset); 
     504                                        _addSliderListener("time"); 
     505                                        break; 
     506                                case "fullscreen": 
     507                                        _addElement("fullscreenButton", alignment, false); 
     508                                        _addElement("normalscreenButton", alignment, true); 
     509                                        _buildHandler("fullscreenButton", "jwSetFullscreen", true); 
     510                                        _buildHandler("normalscreenButton", "jwSetFullscreen", false); 
     511                                        break; 
     512                                case "volume": 
     513                                        var offsetLeft = api.skin.getSkinElement("controlbar", "volumeSliderCapLeft") === undefined ? 0 : api.skin.getSkinElement("controlbar", "volumeSliderCapLeft").width; 
     514                                        var offsetRight = api.skin.getSkinElement("controlbar", "volumeSliderCapRight") === undefined ? 0 : api.skin.getSkinElement("controlbar", "volumeSliderCapRight").width; 
     515                                        var offset = alignment == "left" ? offsetLeft : offsetRight; 
     516                                        var width = api.skin.getSkinElement("controlbar", "volumeSliderRail").width + offsetLeft + offsetRight; 
     517                                        var slidercss = { 
     518                                                height: api.skin.getSkinElement("controlbar", "background").height, 
     519                                                position: "absolute", 
     520                                                top: "0px", 
     521                                                width: width 
     522                                        }; 
     523                                        slidercss[alignment] = alignment == "left" ? _marginleft : _marginright; 
     524                                        var _volumeslider = _appendNewElement("volumeSlider", _elements.elements, slidercss); 
     525                                        _addElement("volumeSliderCapLeft", alignment, true, _volumeslider, alignment == "left" ? 0 : offset); 
     526                                        _addElement("volumeSliderRail", alignment, true, _volumeslider, offset); 
     527                                        _addElement("volumeSliderProgress", alignment, false, _volumeslider, offset); 
     528                                        _addElement("volumeSliderCapRight", alignment, true, _volumeslider, alignment == "right" ? 0 : offset); 
     529                                        _addSliderListener("volume"); 
     530                                        break; 
     531                                case "mute": 
     532                                        _addElement("muteButton", alignment, false); 
     533                                        _addElement("unmuteButton", alignment, true); 
     534                                        _buildHandler("muteButton", "jwSetMute", true); 
     535                                        _buildHandler("unmuteButton", "jwSetMute", false); 
     536                                         
     537                                        break; 
     538                                case "duration": 
     539                                        _addElement("durationText", alignment, true); 
     540                                        break; 
     541                        } 
     542                } 
     543                 
     544                function _addElement(element, alignment, offset, parent, position) { 
     545                        if ((api.skin.getSkinElement("controlbar", element) !== undefined || element.indexOf("Text") > 0 || element.indexOf("divider") === 0) && !(element.indexOf("divider") === 0 && _prevElement.indexOf("divider") === 0)) { 
     546                                _prevElement = element; 
    294547                                var css = { 
     548                                        height: api.skin.getSkinElement("controlbar", "background").height, 
    295549                                        position: "absolute", 
    296550                                        top: "0px" 
    … …  
    298552                                var wid; 
    299553                                if (element.indexOf("Text") > 0) { 
    300                                         _element.innerhtml = "00:00"; 
    301                                         css.font = _settings.fontsize + "px/" + (_api.skin.getSkinElement("controlbar", "background").height + 1) + "px " + _settings.font; 
     554                                        element.innerhtml = "00:00"; 
     555                                        css.font = _settings.fontsize + "px/" + (api.skin.getSkinElement("controlbar", "background").height + 1) + "px " + _settings.font; 
    302556                                        css.color = _settings.fontcolor; 
    303557                                        css.text_align = "center"; 
    … …  
    308562                                        css.color = "#" + _settings.fontcolor.substr(-6); 
    309563                                } else if (element.indexOf("divider") === 0) { 
    310                                         css.background = "url(" + _api.skin.getSkinElement("controlbar", "divider").src + ") repeat-x center left"; 
    311                                         wid = _api.skin.getSkinElement("controlbar", "divider").width; 
     564                                        css.background = "url(" + api.skin.getSkinElement("controlbar", "divider").src + ") repeat-x center left"; 
     565                                        wid = api.skin.getSkinElement("controlbar", "divider").width; 
    312566                                } else { 
    313                                         css.background = "url(" + _api.skin.getSkinElement("controlbar", element).src + ") repeat-x center left"; 
    314                                         wid = _api.skin.getSkinElement("controlbar", element).width; 
    315                                 } 
    316                                 if (align == "left") { 
    317                                         css.left = _settings.leftmargin; 
     567                                        css.background = "url(" + api.skin.getSkinElement("controlbar", element).src + ") repeat-x center left"; 
     568                                        wid = api.skin.getSkinElement("controlbar", element).width; 
     569                                } 
     570                                if (alignment == "left") { 
     571                                        css.left = position === undefined ? _marginleft : position; 
    318572                                        if (offset) { 
    319                                                 _settings.leftmargin += wid; 
     573                                                _marginleft += wid; 
    320574                                        } 
    321                                 } else if (align == "right") { 
    322                                         css.right = _settings.rightmargin; 
     575                                } else if (alignment == "right") { 
     576                                        css.right = position === undefined ? _marginright : position; 
    323577                                        if (offset) { 
    324                                                 _settings.rightmargin += wid; 
     578                                                _marginright += wid; 
    325579                                        } 
    326580                                } 
     581                                 
     582                                if (parent === undefined) { 
     583                                        parent = _elements.elements; 
     584                                } 
     585                                 
    327586                                css.width = wid; 
    328                                 css.height = _api.skin.getSkinElement("controlbar", "background").height; 
    329                                 _css(_element, css); 
    330                         } 
    331                 } 
    332                  
     587                                 
     588                                var newelement = _appendNewElement(element, parent, css); 
     589                                if (api.skin.getSkinElement("controlbar", element + "Over") !== undefined) { 
     590                                        newelement.onmouseover = function(evt) { 
     591                                                evt.stopPropagation(); 
     592                                                newelement.style["background-image"] = ["url(", api.skin.getSkinElement("controlbar", element + "Over").src, ")"].join(""); 
     593                                        }; 
     594                                        newelement.onmouseout = function(evt) { 
     595                                                evt.stopPropagation(); 
     596                                                newelement.style["background-image"] = ["url(", api.skin.getSkinElement("controlbar", element).src, ")"].join(""); 
     597                                        }; 
     598                                } 
     599                                 
     600                        } 
     601                } 
     602                 
     603                function _addListeners() { 
     604                        // Register events with the player. 
     605                        //api.jwAddEventListener(jwplayer.api.events.JWPLAYER_PLAYLIST_LOADED, _playlistHandler); 
     606                        api.jwAddEventListener(jwplayer.api.events.JWPLAYER_MEDIA_BUFFER, _bufferHandler); 
     607                        api.jwAddEventListener(jwplayer.api.events.JWPLAYER_PLAYER_STATE, _stateHandler); 
     608                        api.jwAddEventListener(jwplayer.api.events.JWPLAYER_MEDIA_TIME, _timeHandler); 
     609                        api.jwAddEventListener(jwplayer.api.events.JWPLAYER_MEDIA_MUTE, _muteHandler); 
     610                        api.jwAddEventListener(jwplayer.api.events.JWPLAYER_MEDIA_VOLUME, _volumeHandler); 
     611                        api.jwAddEventListener(jwplayer.api.events.JWPLAYER_MEDIA_COMPLETE, _completeHandler); 
     612                } 
    333613                 
    334614                /** Add interactivity to the jwplayerControlbar elements. **/ 
    335                 function _buildHandlers() { 
    336                         // Register events with the buttons. 
    337                         _buildHandler("playButton", "jwPlay"); 
    338                         _buildHandler("pauseButton", "jwPause"); 
    339                         _buildHandler("prevButton", "jwPlaylistPrev"); 
    340                         _buildHandler("nextButton", "jwPlaylistNext"); 
    341                         _buildHandler("muteButton", "jwSetMute", true); 
    342                         _buildHandler("unmuteButton", "jwSetMute", false); 
    343                         _buildHandler("fullscreenButton", "jwSetFullscreen", true); 
    344                         _buildHandler("normalscreenButton", "jwSetFullscreen", false); 
    345                          
    346                         _addSliders(); 
    347                          
    348                         // Register events with the player. 
    349                         _api.jwAddEventListener(jwplayer.api.events.JWPLAYER_MEDIA_BUFFER, _bufferHandler); 
    350                         _api.jwAddEventListener(jwplayer.api.events.JWPLAYER_PLAYER_STATE, _stateHandler); 
    351                         _api.jwAddEventListener(jwplayer.api.events.JWPLAYER_MEDIA_TIME, _timeHandler); 
    352                         _api.jwAddEventListener(jwplayer.api.events.JWPLAYER_MEDIA_MUTE, _muteHandler); 
    353                         _api.jwAddEventListener(jwplayer.api.events.JWPLAYER_MEDIA_VOLUME, _volumeHandler); 
    354                         _api.jwAddEventListener(jwplayer.api.events.JWPLAYER_MEDIA_COMPLETE, _completeHandler); 
    355                          
     615                function _init() { 
    356616                        // Trigger a few events so the bar looks good on startup. 
    357                         _resizeHandler({ 
    358                                 id: _api.id, 
    359                                 fulscreen: _api.jwGetFullscreen(), 
    360                                 width: _api.jwGetWidth(), 
    361                                 height: _api.jwGetHeight() 
    362                         }); 
    363617                        _timeHandler({ 
    364                                 id: _api.id, 
    365                                 duration: _api.jwGetDuration(), 
     618                                id: api.id, 
     619                                duration: api.jwGetDuration(), 
    366620                                position: 0 
    367621                        }); 
    368622                        _bufferHandler({ 
    369                                 id: _api.id, 
     623                                id: api.id, 
    370624                                bufferProgress: 0 
    371625                        }); 
    372626                        _muteHandler({ 
    373                                 id: _api.id, 
    374                                 mute: _api.jwGetMute() 
     627                                id: api.id, 
     628                                mute: api.jwGetMute() 
    375629                        }); 
    376630                        _stateHandler({ 
    377                                 id: _api.id, 
     631                                id: api.id, 
    378632                                newstate: jwplayer.api.events.state.IDLE 
    379633                        }); 
    380634                        _volumeHandler({ 
    381                                 id: _api.id, 
    382                                 volume: _api.jwGetVolume() 
     635                                id: api.id, 
     636                                volume: api.jwGetVolume() 
    383637                        }); 
    384638                } 
    … …  
    387641                /** Set a single button handler. **/ 
    388642                function _buildHandler(element, handler, args) { 
    389                         if (_api.skin.getSkinElement("controlbar", element) !== undefined) { 
    390                                 var nam = _domelement.id + "_" + element; 
    391                                 var _element = document.getElementById(nam); 
     643                        if (api.skin.getSkinElement("controlbar", element) !== undefined) { 
     644                                var _element = _elements[element]; 
    392645                                if (_element !== null) { 
    393646                                        _css(_element, { 
    … …  
    397650                                                _element.onmouseup = function(evt) { 
    398651                                                        evt.stopPropagation(); 
    399                                                         _api.jwSetFullscreen(!_api.jwGetFullscreen()); 
    400                                                         _resizeHandler({ 
    401                                                                 id: _api.id, 
    402                                                                 fullscreen: _api.jwGetFullscreen(), 
    403                                                                 width: _api.jwGetWidth(), 
    404                                                                 height: _api.jwGetHeight() 
    405                                                         }); 
     652                                                        api.jwSetFullscreen(!api.jwGetFullscreen()); 
    406653                                                }; 
    407654                                        } else { 
    408655                                                _element.onmouseup = function(evt) { 
    409656                                                        evt.stopPropagation(); 
    410                                                         if (!jwplayer.html5.utils.isNull(args)) { 
    411                                                                 _api[handler](args); 
     657                                                        if (!(args === null)) { 
     658                                                                api[handler](args); 
    412659                                                        } else { 
    413                                                                 _api[handler](); 
     660                                                                api[handler](); 
    414661                                                        } 
    415662                                                         
    … …  
    420667                } 
    421668                 
    422                  
    423669                /** Set the volume drag handler. **/ 
    424                 function _addSliders() { 
    425                         var bar = _domelement; 
    426                         var trl = document.getElementById(_domelement.id + "_timeSliderRail"); 
    427                         var vrl = document.getElementById(_domelement.id + "_volumeSliderRail"); 
    428                         _css(_domelement, { 
     670                function _addSliderListener(name) { 
     671                        var bar = _elements[name + "Slider"]; 
     672                        _css(_elements.elements, { 
    429673                                "cursor": "pointer" 
    430674                        }); 
    431                         _css(trl, { 
    432                                 "cursor": "pointer" 
    433                         }); 
    434                         _css(vrl, { 
     675                        _css(bar, { 
    435676                                "cursor": "pointer" 
    436677                        }); 
    437678                        bar.onmousedown = function(evt) { 
    438                                 var trlRect = trl.getBoundingClientRect(); 
    439                                 var vrlRect = vrl.getBoundingClientRect(); 
    440                                 if (evt.pageX >= trlRect.left - window.pageXOffset && evt.pageX <= trlRect.left - window.pageXOffset + trlRect.width) { 
    441                                         _settings.scrubber = "time"; 
    442                                 } else if (evt.pageX >= vrlRect.left - window.pageXOffset && evt.pageX <= vrlRect.left - window.pageXOffset + vrlRect.width) { 
    443                                         _settings.scrubber = "volume"; 
    444                                 } 
     679                                _scrubber = name; 
    445680                        }; 
    446681                        bar.onmouseup = function(evt) { 
    … …  
    449684                        }; 
    450685                        bar.onmousemove = function(evt) { 
    451                                 if (_settings.scrubber == "time") { 
    452                                         _settings.mousedown = true; 
     686                                if (_scrubber == "time") { 
     687                                        _mousedown = true; 
    453688                                        var xps = evt.pageX - bar.getBoundingClientRect().left - window.pageXOffset; 
    454                                         _css(document.getElementById(_domelement.id + "_timeSliderThumb"), { 
     689                                        _css(_elements.timeSliderThumb, { 
    455690                                                left: xps 
    456691                                        }); 
    … …  
    462697                /** The slider has been moved up. **/ 
    463698                function _sliderUp(msx) { 
    464                         _settings.mousedown = false; 
     699                        _mousedown = false; 
    465700                        var railRect, xps; 
    466                         if (_settings.scrubber == "time") { 
    467                                 railRect = document.getElementById(_domelement.id + "_timeSliderRail").getBoundingClientRect(); 
     701                        if (_scrubber == "time") { 
     702                                railRect = _elements.timeSliderRail.getBoundingClientRect(); 
    468703                                xps = msx - railRect.left + window.pageXOffset; 
    469                                 var pos = xps / railRect.width * _settings.currentDuration; 
     704                                var pos = xps / railRect.width * _currentDuration; 
    470705                                if (pos < 0) { 
    471706                                        pos = 0; 
    472                                 } else if (pos > _settings.currentDuration) { 
    473                                         pos = _settings.currentDuration - 3; 
    474                                 } 
    475                                 _api.jwSeek(pos); 
    476                                 if (_api.jwGetState() != jwplayer.api.events.state.PLAYING) { 
    477                                         _api.jwPlay(); 
    478                                 } 
    479                         } else if (_settings.scrubber == "volume") { 
    480                                 railRect = document.getElementById(_domelement.id + "_volumeSliderRail").getBoundingClientRect(); 
     707                                } else if (pos > _currentDuration) { 
     708                                        pos = _currentDuration - 3; 
     709                                } 
     710                                api.jwSeek(pos); 
     711                                if (api.jwGetState() != jwplayer.api.events.state.PLAYING) { 
     712                                        api.jwPlay(); 
     713                                } 
     714                        } else if (_scrubber == "volume") { 
     715                                railRect = _elements.volumeSliderRail.getBoundingClientRect(); 
    481716                                xps = msx - railRect.left - window.pageXOffset; 
    482717                                var pct = Math.round(xps / railRect.width * 100); 
    … …  
    486721                                        pct = 100; 
    487722                                } 
    488                                 if (_api.jwGetMute()) { 
    489                                         _api.jwSetMute(false); 
    490                                 } 
    491                                 _api.jwSetVolume(pct); 
    492                         } 
    493                         _settings.scrubber = "none"; 
     723                                if (api.jwGetMute()) { 
     724                                        api.jwSetMute(false); 
     725                                } 
     726                                api.jwSetVolume(pct); 
     727                        } 
     728                        _scrubber = "none"; 
    494729                } 
    495730                 
    … …  
    497732                /** Update the buffer percentage. **/ 
    498733                function _bufferHandler(event) { 
    499                         if (!jwplayer.html5.utils.isNull(event.bufferPercent)) { 
    500                                 _settings.currentBuffer = event.bufferPercent; 
     734                        if (!(event.bufferPercent === null)) { 
     735                                _currentBuffer = event.bufferPercent; 
    501736                        } 
    502737                         
    503                         var wid = document.getElementById(_domelement.id + "_timeSliderRail").getBoundingClientRect().width; 
    504                         var bufferWidth = isNaN(Math.round(wid * _settings.currentBuffer / 100)) ? 0 : Math.round(wid * _settings.currentBuffer / 100); 
    505                         _css(document.getElementById(_domelement.id + "_timeSliderBuffer"), { 
     738                        var wid = _elements.timeSliderRail.getBoundingClientRect().width; 
     739                        var bufferWidth = isNaN(Math.round(wid * _currentBuffer / 100)) ? 0 : Math.round(wid * _currentBuffer / 100); 
     740                        _css(_elements.timeSliderBuffer, { 
    506741                                width: bufferWidth 
    507742                        }); 
    … …  
    512747                function _muteHandler(event) { 
    513748                        if (event.mute) { 
    514                                 _hide(document.getElementById(_domelement.id + "_muteButton")); 
    515                                 _show(document.getElementById(_domelement.id + "_unmuteButton")); 
    516                                 _hide(document.getElementById(_domelement.id + "_volumeSliderProgress")); 
     749                                _hide(_elements.muteButton); 
     750                                _show(_elements.unmuteButton); 
     751                                _hide(_elements.volumeSliderProgress); 
    517752                        } else { 
    518                                 _show(document.getElementById(_domelement.id + "_muteButton")); 
    519                                 _hide(document.getElementById(_domelement.id + "_unmuteButton")); 
    520                                 _show(document.getElementById(_domelement.id + "_volumeSliderProgress")); 
     753                                _show(_elements.muteButton); 
     754                                _hide(_elements.unmuteButton); 
     755                                _show(_elements.volumeSliderProgress); 
    521756                        } 
    522757                } 
    … …  
    527762                        // Handle the play / pause button 
    528763                        if (event.newstate == jwplayer.api.events.state.BUFFERING || event.newstate == jwplayer.api.events.state.PLAYING) { 
    529                                 _show(document.getElementById(_domelement.id + "_pauseButton")); 
    530                                 _hide(document.getElementById(_domelement.id + "_playButton")); 
     764                                _show(_elements.pauseButton); 
     765                                _hide(_elements.playButton); 
    531766                        } else { 
    532                                 _hide(document.getElementById(_domelement.id + "_pauseButton")); 
    533                                 _show(document.getElementById(_domelement.id + "_playButton")); 
     767                                _hide(_elements.pauseButton); 
     768                                _show(_elements.playButton); 
    534769                        } 
    535770                         
    536771                        // Show / hide progress bar 
    537772                        if (event.newstate == jwplayer.api.events.state.IDLE) { 
    538                                 _hide(document.getElementById(_domelement.id + "_timeSliderBuffer")); 
    539                                 _hide(document.getElementById(_domelement.id + "_timeSliderProgress")); 
    540                                 _hide(document.getElementById(_domelement.id + "_timeSliderThumb")); 
     773                                _hide(_elements.timeSliderBuffer); 
     774                                _hide(_elements.timeSliderProgress); 
     775                                _hide(_elements.timeSliderThumb); 
    541776                        } else { 
    542                                 _show(document.getElementById(_domelement.id + "_timeSliderBuffer")); 
     777                                _show(_elements.timeSliderBuffer); 
    543778                                if (event.newstate != jwplayer.api.events.state.BUFFERING) { 
    544                                         _show(document.getElementById(_domelement.id + "_timeSliderProgress")); 
    545                                         _show(document.getElementById(_domelement.id + "_timeSliderThumb")); 
     779                                        _show(_elements.timeSliderProgress); 
     780                                        _show(_elements.timeSliderThumb); 
    546781                                } 
    547782                        } 
    … …  
    553788                        _timeHandler(jwplayer.utils.extend(event, { 
    554789                                position: 0, 
    555                                 duration: _settings.currentDuration 
     790                                duration: _currentDuration 
    556791                        })); 
    557792                } 
    … …  
    560795                /** Update the playback time. **/ 
    561796                function _timeHandler(event) { 
    562                         if (!jwplayer.html5.utils.isNull(event.position)) { 
    563                                 _settings.currentPosition = event.position; 
    564                         } 
    565                         if (!jwplayer.html5.utils.isNull(event.duration)) { 
    566                                 _settings.currentDuration = event.duration; 
    567                         } 
    568                         var progress = (_settings.currentPosition === _settings.currentDuration === 0) ? 0 : _settings.currentPosition / _settings.currentDuration; 
    569                         var railRect = document.getElementById(_domelement.id + "_timeSliderRail").getBoundingClientRect(); 
     797                        if (!(event.position === null)) { 
     798                                _currentPosition = event.position; 
     799                        } 
     800                        if (!(event.duration === null)) { 
     801                                _currentDuration = event.duration; 
     802                        } 
     803                        var progress = (_currentPosition === _currentDuration === 0) ? 0 : _currentPosition / _currentDuration; 
     804                        var railRect = _elements.timeSliderRail.getBoundingClientRect(); 
    570805                        var progressWidth = isNaN(Math.round(railRect.width * progress)) ? 0 : Math.round(railRect.width * progress); 
    571                         var thumbPosition = railRect.left + progressWidth - _domelement.getBoundingClientRect().left; 
     806                        var thumbPosition = progressWidth; 
    572807                         
    573                         document.getElementById(_domelement.id + "_timeSliderProgress").style.width = progressWidth; 
    574                         if (!_settings.mousedown) { 
    575                                 document.getElementById(_domelement.id + "_timeSliderThumb").style.left = thumbPosition; 
    576                         } 
    577                         document.getElementById(_domelement.id + "_durationText").innerHTML = _timeFormat(_settings.currentDuration); 
    578                         document.getElementById(_domelement.id + "_elapsedText").innerHTML = _timeFormat(_settings.currentPosition); 
     808                        _elements.timeSliderProgress.style.width = progressWidth; 
     809                        if (!_mousedown) { 
     810                                if (_elements.timeSliderThumb) { 
     811                                        _elements.timeSliderThumb.style.left = thumbPosition; 
     812                                } 
     813                        } 
     814                        if (_elements.durationText) { 
     815                                _elements.durationText.innerHTML = _timeFormat(_currentDuration); 
     816                        } 
     817                        if (_elements.elapsedText) { 
     818                                _elements.elapsedText.innerHTML = _timeFormat(_currentPosition); 
     819                        } 
    579820                } 
    580821                 
    … …  
    591832                 
    592833                 
    593                 /** Flip the player size to/from full-browser-screen. **/ 
    594                 function _resizeHandler(event) { 
    595                         _settings.width = event.width; 
    596                         _settings.fullscreen = event.fullscreen; 
    597                         if (event.fullscreen) { 
    598                                 _show(document.getElementById(_domelement.id + "_normalscreenButton")); 
    599                                 _hide(document.getElementById(_domelement.id + "_fullscreenButton")); 
    600                                 // TODO 
    601                                 if (false) { 
    602                                         window.onresize(function() { 
    603                                                 _resizeBar(); 
    604                                         }); 
    605                                 } 
    606                         } else { 
    607                                 _hide(document.getElementById(_domelement.id + "_normalscreenButton")); 
    608                                 _show(document.getElementById(_domelement.id + "_fullscreenButton")); 
    609                                 // TODO 
    610                                 if (false) { 
    611                                         window.onresize(null); 
    612                                 } 
    613                         } 
    614                         _resizeBar(event); 
    615                         _timeHandler(event); 
    616                         _bufferHandler(event); 
    617                 } 
    618                  
    619                  
    620834                /** Resize the jwplayerControlbar. **/ 
    621                 function _resizeBar(event) { 
    622                         var lft = _settings.left; 
    623                         var top = _settings.top; 
    624                         var wid = _settings.width; 
    625                         var hei = _domelement.height; 
    626                         var controlbarcss = {}; 
    627                         if (_settings.position == "over") { 
    628                                 lft += 1 * _settings.margin; 
    629                                 top -= 1 * _settings.margin + hei; 
    630                                 wid -= 2 * _settings.margin; 
    631                         } 
    632                         if (_settings.fullscreen) { 
    633                                 lft = _settings.margin; 
    634                                 top = window.height - _settings.margin - hei; 
    635                                 wid = window.width - 2 * _settings.margin; 
    636                                 controlbarcss.z_index = 99; 
    637                         } else { 
    638                                 controlbarcss.z_index = 97; 
    639                         } 
     835                function _resizeBar() { 
     836                        var controlbarcss = { 
     837                                width: _width 
     838                        }; 
     839                        var elementcss = {}; 
     840                        if (_settings.position.toUpperCase() == jwplayer.html5.view.positions.OVER || _fullscreen) { 
     841                                controlbarcss.left = _settings.margin; 
     842                                controlbarcss.width -= 2 * _settings.margin; 
     843                                controlbarcss.top = _height -  api.skin.getSkinElement("controlbar", "background").height - _settings.margin; 
     844                        } 
     845 
     846                        elementcss.left = api.skin.getSkinElement("controlbar", "capLeft").width; 
     847                        elementcss.width = controlbarcss.width - api.skin.getSkinElement("controlbar", "capLeft").width - api.skin.getSkinElement("controlbar", "capRight").width; 
    640848                         
     849                        var timeSliderLeft = api.skin.getSkinElement("controlbar", "timeSliderCapLeft") === undefined ? 0 : api.skin.getSkinElement("controlbar", "timeSliderCapLeft").width; 
     850                        _css(_elements.timeSliderRail, { 
     851                                width: (elementcss.width - _marginleft - _marginright), 
     852                                left: timeSliderLeft 
     853                        }); 
     854                        if (_elements.timeSliderCapRight !== null) { 
     855                                _css(_elements.timeSliderCapRight, { 
     856                                        left: timeSliderLeft + (elementcss.width - _marginleft - _marginright) 
     857                                }); 
     858                        } 
     859                        _css(_wrapper, controlbarcss); 
     860                        _css(_elements.elements, elementcss); 
    641861                         
    642                         controlbarcss.left = lft; 
    643                         controlbarcss.top = top; 
    644                         controlbarcss.width = wid; 
    645                         _css(document.getElementById(_domelement.id + "_timeSliderRail"), { 
    646                                 width: (wid - _settings.leftmargin - _settings.rightmargin) 
    647                         }); 
    648                         _css(_domelement, controlbarcss); 
    649862                } 
    650863                 
    … …  
    652865                /** Update the volume level. **/ 
    653866                function _volumeHandler(event) { 
    654                         var progress = isNaN(event.volume / 100) ? 1 : event.volume / 100; 
    655                         var railRect = document.getElementById(_domelement.id + "_volumeSliderRail").getBoundingClientRect(); 
    656                         var progressWidth = isNaN(Math.round(railRect.width * progress)) ? 0 : Math.round(railRect.width * progress); 
    657                         var offset = parseInt(document.getElementById(_domelement.id + "_volumeSliderRail").style.right.replace("px", ""), 10); 
    658                          
    659                         _css(document.getElementById(_domelement.id + "_volumeSliderProgress"), { 
    660                                 width: progressWidth, 
    661                                 right: railRect.width - progressWidth + offset 
    662                         }); 
    663                 } 
    664                  
    665                 _buildElements(); 
    666                 _buildHandlers(); 
     867                        if (_elements.volumeSliderRail !== null) { 
     868                                var progress = isNaN(event.volume / 100) ? 1 : event.volume / 100; 
     869                                var width = parseInt(_elements.volumeSliderRail.style.width.replace("px", ""), 10); 
     870                                var progressWidth = isNaN(Math.round(width * progress)) ? 0 : Math.round(width * progress); 
     871                                var offset = parseInt(_elements.volumeSliderRail.style.right.replace("px", ""), 10); 
     872                                 
     873                                var volumeSliderLeft = api.skin.getSkinElement("controlbar", "volumeSliderCapLeft") === undefined ? 0 : api.skin.getSkinElement("controlbar", "volumeSliderCapLeft").width; 
     874                                _css(_elements.volumeSliderProgress, { 
     875                                        width: progressWidth, 
     876                                        left: volumeSliderLeft 
     877                                }); 
     878                                 
     879                                if (_elements.volumeSliderCapLeft !== undefined) { 
     880                                        _css(_elements.volumeSliderCapLeft, { 
     881                                                left: 0 
     882                                        }); 
     883                                } 
     884                        } 
     885                } 
     886                 
     887                function _setup() { 
     888                        _buildBase(); 
     889                        _buildElements(); 
     890                        _addListeners(); 
     891                        _init(); 
     892                } 
     893                 
     894                _setup(); 
     895                return this; 
    667896        }; 
    668897})(jwplayer); 
    … …  
    677906        var _mediainfovariables = ["width", "height", "state", "playlist", "item", "position", "buffer", "duration", "volume", "mute", "fullscreen"]; 
    678907         
    679         jwplayer.html5.controller = function(model, view, container) { 
     908        jwplayer.html5.controller = function(api, container, model, view) { 
    680909                var _model = model; 
    681910                var _view = view; 
    … …  
    697926                                                case jwplayer.api.events.state.IDLE: 
    698927                                                        _model.setActiveMediaProvider(_model.playlist[_model.item]); 
    699                                                         _eventDispatcher.addEventListener(jwplayer.api.events.JWPLAYER_MEDIA_BUFFER_FULL, _model.getMedia().play); 
     928                                                        _model.addEventListener(jwplayer.api.events.JWPLAYER_MEDIA_BUFFER_FULL, function() { 
     929                                                                _model.getMedia().play(); 
     930                                                        }); 
    700931                                                        _model.getMedia().load(_model.playlist[_model.item]); 
    701932                                                        break; 
    … …  
    8211052                 
    8221053                /** Get / set the video's volume level. **/ 
    823                 function _setVolume(arg) { 
     1054                function _setVolume(volume) { 
    8241055                        try { 
    825                                 switch (jwplayer.html5.utils.typeOf(arg)) { 
     1056                                switch (typeof(volume)) { 
    8261057                                        case "number": 
    827                                                 _model.getMedia().volume(arg); 
     1058                                                _model.getMedia().volume(volume); 
    8281059                                                break; 
    8291060                                        case "string": 
    830                                                 _model.getMedia().volume(parseInt(arg, 10)); 
     1061                                                _model.getMedia().volume(parseInt(volume, 10)); 
    8311062                                                break; 
    8321063                                } 
    … …  
    8401071                 
    8411072                /** Get / set the mute state of the player. **/ 
    842                 function _setMute(arg) { 
     1073                function _setMute(state) { 
    8431074                        try { 
    844                                 _model.getMedia().mute(arg); 
     1075                                _model.getMedia().mute(state); 
    8451076                                return true; 
    8461077                        } catch (err) { 
    … …  
    8521083                 
    8531084                /** Resizes the video **/ 
    854                 function _resize(arg1, arg2) { 
     1085                function _resize(width, height) { 
    8551086                        try { 
    856                                 _model.getMedia().resize(arg1, arg2); 
     1087                                _model.width = width; 
     1088                                _model.height = height; 
     1089                                _view.resize(width, height); 
    8571090                                return true; 
    8581091                        } catch (err) { 
    … …  
    8641097                 
    8651098                /** Jumping the player to/from fullscreen. **/ 
    866                 function _setFullscreen(arg) { 
     1099                function _setFullscreen(state) { 
    8671100                        try { 
    868                                 _model.getMedia().fullscreen(arg); 
     1101                                _model.getMedia().fullscreen(state); 
    8691102                                return true; 
    8701103                        } catch (err) { 
    … …  
    9621195         
    9631196         
    964         jwplayer.html5.display = function(api, container, screencolor) { 
    965                 var _container = container; 
     1197        jwplayer.html5.display = function(api, config) { 
    9661198                var _display = {}; 
    967                 screencolor = (api.skin.getComponentSettings("display").backgroundcolor === undefined) ? screencolor : api.skin.getComponentSettings("display").backgroundcolor; 
     1199                var _width; 
     1200                var _height; 
     1201                var _degreesRotated; 
     1202                var _rotationInterval; 
     1203                var _bufferRotation = api.skin.getComponentSettings("display").bufferrotation === undefined ? 15 : parseInt(api.skin.getComponentSettings("display").bufferrotation, 10); 
     1204                var _bufferInterval = api.skin.getComponentSettings("display").bufferinterval === undefined ? 100 : parseInt(api.skin.getComponentSettings("display").bufferinterval, 10); 
     1205                config.screencolor = (api.skin.getComponentSettings("display").backgroundcolor === undefined) ? config.screencolor : api.skin.getComponentSettings("display").backgroundcolor; 
     1206                config.screencolor = (config.screencolor === undefined) ? "" : config.screencolor.replace("0x", "#"); 
    9681207                var _elements = _initializeDisplayElements(); 
    9691208                api.jwAddEventListener(jwplayer.api.events.JWPLAYER_PLAYER_STATE, _stateHandler); 
    … …  
    9781217                        _display.display = createElement("div", "display"); 
    9791218                        _display.display_image = createElement("div", "display_image"); 
    980                         _display.display_icon = createElement("img", "display_icon"); 
    981                         _display.display_icon.src = api.skin.getSkinElement("display", "playIcon").src; 
    982                         _display.display_icon.alt = "Click to play video"; 
     1219                        _display.display_icon = createElement("div", "display_icon"); 
    9831220                        _display.display_iconBackground = createElement("div", "display_iconBackground"); 
    9841221                        _display.logo = createElement("div", "logo"); 
    … …  
    9871224                        _display.display.appendChild(_display.display_iconBackground); 
    9881225                        _display.display.appendChild(_display.logo); 
    989                         _container.parentNode.insertBefore(_display.display, _container); 
    9901226                        _setupDisplayElements(); 
    9911227                } 
    9921228                 
     1229                 
     1230                this.getDisplayElement = function() { 
     1231                        return _display.display; 
     1232                }; 
     1233                 
     1234                this.resize = function(width, height) { 
     1235                        _width = width; 
     1236                        _height = height; 
     1237                        _css(_display.display, { 
     1238                                width: width, 
     1239                                height: height 
     1240                        }); 
     1241                        _css(_display.display_image, { 
     1242                                width: width, 
     1243                                height: height 
     1244                        }); 
     1245                        _css(_display.display_iconBackground, { 
     1246                                top: ((_height - api.skin.getSkinElement("display", "background").height) / 2) + "px", 
     1247                                left: ((_width - api.skin.getSkinElement("display", "background").width) / 2) + "px" 
     1248                        }); 
     1249                        _stateHandler({}); 
     1250                }; 
    9931251                 
    9941252                function createElement(tag, element) { 
    … …  
    10241282                                display: { 
    10251283                                        style: { 
    1026                                                 cursor: 'pointer', 
    1027                                                 width: api.jwGetWidth() + "px", 
    1028                                                 height: api.jwGetHeight() + "px", 
    1029                                                 position: 'relative', 
    1030                                                 'z-index': 50, 
    1031                                                 margin: 0, 
    1032                                                 padding: 0 
     1284                                                cursor: 'pointer' 
    10331285                                        }, 
    10341286                                        click: _displayClickHandler 
    … …  
    10491301                                                cursor: 'pointer', 
    10501302                                                position: 'absolute', 
    1051                                                 top: ((api.jwGetHeight() - api.skin.getSkinElement("display", "background").height) / 2) + "px", 
    1052                                                 left: ((api.jwGetWidth() - api.skin.getSkinElement("display", "background").width) / 2) + "px", 
     1303                                                top: ((_height - api.skin.getSkinElement("display", "background").height) / 2) + "px", 
     1304                                                left: ((_width - api.skin.getSkinElement("display", "background").width) / 2) + "px", 
    10531305                                                border: 0, 
    10541306                                                'background-image': (['url(', api.skin.getSkinElement("display", "background").src, ')']).join(''), 
    … …  
    10621314                                        style: { 
    10631315                                                display: 'block', 
    1064                                                 background: screencolor, 
    1065                                                 width: api.jwGetWidth() + "px", 
    1066                                                 height: api.jwGetHeight() + "px", 
     1316                                                background: config.screencolor, 
     1317                                                width: _width + "px", 
     1318                                                height: _height + "px", 
    10671319                                                position: 'absolute', 
    10681320                                                cursor: 'pointer', 
    … …  
    10971349                 
    10981350                function _displayClickHandler(evt) { 
    1099                         /*if (player._media === undefined) { 
    1100                          document.location.href = jwplayer.html5.utils.getAbsolutePath(player.getPlaylist()[player.getConfig().item].levels[0]); 
    1101                          return; 
    1102                          }*/ 
    1103                         if (typeof evt.preventDefault != 'undefined') { 
     1351                        if (typeof evt.preventDefault != "undefined") { 
    11041352                                evt.preventDefault(); // W3C 
    11051353                        } else { 
    … …  
    11201368                 
    11211369                 
    1122                 function _setIcon(path) { 
    1123                         _display.display_icon.src = path; 
    1124                 } 
    1125                  
    1126                  
    1127                 function _animate(element, state) { 
    1128                         var speed = 'slow'; 
    1129                         if (!_display.animate) { 
    1130                                 return; 
    1131                         } 
    1132                         if (state) { 
    1133                                 element.slideDown(speed, function() { 
    1134                                         _animate(element); 
    1135                                 }); 
     1370                function _setDisplayIcon(newIcon) { 
     1371                        _show(_display.display_iconBackground); 
     1372                        _display.display_icon.style["background-image"] = (['url(', api.skin.getSkinElement("display", newIcon).src, ')']).join(''); 
     1373                        _css(_display.display_icon, { 
     1374                                display: "block", 
     1375                                width: api.skin.getSkinElement("display", newIcon).width, 
     1376                                height: api.skin.getSkinElement("display", newIcon).height, 
     1377                                top: (api.skin.getSkinElement("display", "background").height - api.skin.getSkinElement("display", newIcon).height) / 2, 
     1378                                left: (api.skin.getSkinElement("display", "background").width - api.skin.getSkinElement("display", newIcon).width) / 2 
     1379                        }); 
     1380                        if (api.skin.getSkinElement("display", newIcon + "Over") !== undefined) { 
     1381                                _display.display_icon.onmouseover = function(evt) { 
     1382                                        evt.stopPropagation(); 
     1383                                        _display.display_icon.style["background-image"] = ["url(", api.skin.getSkinElement("display", newIcon + "Over").src, ")"].join(""); 
     1384                                }; 
     1385                                _display.display_icon.onmouseout = function(evt) { 
     1386                                        evt.stopPropagation(); 
     1387                                        _display.display_icon.style["background-image"] = ["url(", api.skin.getSkinElement("display", newIcon).src, ")"].join(""); 
     1388                                }; 
    11361389                        } else { 
    1137                                 element.slideUp(speed, function() { 
    1138                                         _animate(element, true); 
    1139                                 }); 
    1140                         } 
    1141                 } 
    1142                  
     1390                                _display.display_icon.onmouseover = undefined; 
     1391                                _display.display_icon.onmouseout = undefined; 
     1392                        } 
     1393                } 
     1394                 
     1395                function _hideDisplayIcon() { 
     1396                        _hide(_display.display_icon); 
     1397                        _hide(_display.display_iconBackground); 
     1398                } 
    11431399                 
    11441400                function _stateHandler(obj) { 
    1145                         _display.animate = false; 
     1401                        if (_rotationInterval !== undefined) { 
     1402                                clearInterval(_rotationInterval); 
     1403                                _rotationInterval = undefined; 
     1404                                jwplayer.html5.utils.animations.rotate(_display.display_icon, 0); 
     1405                        } 
    11461406                        switch (api.jwGetState()) { 
    11471407                                case jwplayer.api.events.state.BUFFERING: 
    1148                                         _show(_display.logo); 
    1149                                         setTimeout(function() { 
    1150                                                 _hide(_display.logo); 
    1151                                         //.fadeOut(_logoDefaults.out * 1000); 
    1152                                         }, _logoDefaults.timeout * 1000); 
    1153                                         _display.display_icon.src = api.skin.getSkinElement("display", "bufferIcon").src; 
    1154                                         _css(_display.display_icon, { 
    1155                                                 display: "block", 
    1156                                                 top: (api.skin.getSkinElement("display", "background").height - api.skin.getSkinElement("display", "bufferIcon").height) / 2 + "px", 
    1157                                                 left: (api.skin.getSkinElement("display", "background").width - api.skin.getSkinElement("display", "bufferIcon").width) / 2 + "px" 
    1158                                         }); 
    1159                                         _display.animate = true; 
    1160                                         // TODO: Buffer Icon rotation 
    1161                                         if (false) { 
    1162                                                 _animate(_display.display_iconBackground); 
    1163                                         } 
    1164                                         _hide(_display.display_iconBackground); 
     1408                                        jwplayer.html5.utils.fadeTo(_display.logo, 0, _logoDefaults.timeout, 1); 
     1409                                        _setDisplayIcon("bufferIcon"); 
     1410                                        _degreesRotated = 0; 
     1411                                        _rotationInterval = setInterval(function() { 
     1412                                                _degreesRotated += _bufferRotation; 
     1413                                                jwplayer.html5.utils.animations.rotate(_display.display_icon, _degreesRotated % 360); 
     1414                                        }, _bufferInterval); 
     1415                                        _setDisplayIcon("bufferIcon"); 
    11651416                                        break; 
    11661417                                case jwplayer.api.events.state.PAUSED: 
    1167                                         _show(_display.logo); 
     1418                                        jwplayer.html5.utils.fadeTo(_display.logo, 1, 0, 0); 
    11681419                                        _css(_display.display_image, { 
    11691420                                                background: "transparent no-repeat center center" 
    11701421                                        }); 
    11711422                                        _show(_display.display_iconBackground); 
    1172                                         _display.display_icon.src = api.skin.getSkinElement("display", "playIcon").src; 
    1173                                         _css(_display.display_icon, { 
    1174                                                 display: "block", 
    1175                                                 top: (api.skin.getSkinElement("display", "background").height - api.skin.getSkinElement("display", "playIcon").height) / 2 + "px", 
    1176                                                 left: (api.skin.getSkinElement("display", "background").width - api.skin.getSkinElement("display", "playIcon").width) / 2 + "px" 
    1177                                         }); 
     1423                                        _setDisplayIcon("playIcon"); 
    11781424                                        break; 
    11791425                                case jwplayer.api.events.state.IDLE: 
    1180                                         _hide(_display.logo); 
     1426                                        _display.logo.style.display = "block"; 
     1427                                        var background = api.jwGetPlaylist()[api.jwGetItem()].image === "" ? config.screencolor : config.screencolor + " url('" + jwplayer.html5.utils.getAbsolutePath(api.jwGetPlaylist()[api.jwGetItem()].image) + "')"; 
    11811428                                        _css(_display.display_image, { 
    1182                                                 background: screencolor + " url('" + jwplayer.html5.utils.getAbsolutePath(api.jwGetPlaylist()[api.jwGetItem()].image) + "') no-repeat center center" 
     1429                                                background: background + " no-repeat center center" 
    11831430                                        }); 
    11841431                                        _show(_display.display_iconBackground); 
    1185                                         _display.display_icon.src = api.skin.getSkinElement("display", "playIcon").src; 
    1186                                         _css(_display.display_icon, { 
    1187                                                 display: "block", 
    1188                                                 top: (api.skin.getSkinElement("display", "background").height - api.skin.getSkinElement("display", "playIcon").height) / 2 + "px", 
    1189                                                 left: (api.skin.getSkinElement("display", "background").width - api.skin.getSkinElement("display", "playIcon").width) / 2 + "px" 
    1190                                         }); 
     1432                                        _setDisplayIcon("playIcon"); 
    11911433                                        break; 
    11921434                                default: 
    … …  
    11961438                                                }); 
    11971439                                                _show(_display.display_iconBackground); 
    1198                                                 _display.display_icon.src = api.skin.getSkinElement("display", "muteIcon").src; 
    1199                                                 _css(_display.display_icon, { 
    1200                                                         display: "block", 
    1201                                                         top: (api.skin.getSkinElement("display", "muteIcon").height - api.skin.getSkinElement("display", "muteIcon").height) / 2 + "px", 
    1202                                                         left: (api.skin.getSkinElement("display", "background").width - api.skin.getSkinElement("display", "muteIcon").width) / 2 + "px" 
    1203                                                 }); 
     1440                                                _setDisplayIcon("muteIcon"); 
     1441                                                 
    12041442                                        } else { 
    12051443                                                try { 
    … …  
    12081446                                                 
    12091447                                                } 
    1210                                                 _show(_display.logo); 
    1211                                                 setTimeout(function() { 
    1212                                                         _hide(_display.logo); 
    1213                                                 }, _logoDefaults.timeout * 1000); 
     1448                                                _display.logo.style.display = "block"; 
     1449                                                jwplayer.html5.utils.fadeTo(_display.logo, 0, _logoDefaults.timeout, 1); 
    12141450                                                _css(_display.display_image, { 
    12151451                                                        background: "transparent no-repeat center center" 
    … …  
    12221458                } 
    12231459                 
     1460                return this; 
    12241461        }; 
    12251462         
    … …  
    13521589                        } 
    13531590                }; 
     1591        }; 
     1592})(jwplayer); 
     1593/** 
     1594 * JW Player Video Media component 
     1595 * 
     1596 * @author zach 
     1597 * @version 1.0 
     1598 */ 
     1599(function(jwplayer) { 
     1600        jwplayer.html5.extensionmap = { 
     1601                "3gp": "video/3gpp", 
     1602                "3gpp": "video/3gpp", 
     1603                "3g2": "video/3gpp2", 
     1604                "3gpp2": "video/3gpp2", 
     1605                "flv": "video/x-flv", 
     1606                "f4a": "audio/mp4", 
     1607                "f4b": "audio/mp4", 
     1608                "f4p": "video/mp4", 
     1609                "f4v": "video/mp4", 
     1610                "mov": "video/quicktime", 
     1611                "m4a": "audio/mp4", 
     1612                "m4b": "audio/mp4", 
     1613                "m4p": "audio/mp4", 
     1614                "m4v": "video/mp4", 
     1615                "mkv": "video/x-matroska", 
     1616                "mp4": "video/mp4", 
     1617                "sdp": "application/sdp", 
     1618                "vp6": "video/x-vp6", 
     1619                "aac": "audio/aac", 
     1620                "mp3": "audio/mp3", 
     1621                "ogg": "audio/ogg", 
     1622                "ogv": "video/ogg", 
     1623                "webm": "video/webm" 
    13541624        }; 
    13551625})(jwplayer); 
    … …  
    14111681                var _stopped; 
    14121682                var _loadcount = 0; 
     1683                var _start = false; 
    14131684                var hasChrome = false; 
    14141685                 
    … …  
    14341705                                _model.state = newstate; 
    14351706                                _state = newstate; 
    1436                                 if (oldstate == jwplayer.api.events.state.IDLE && newstate == jwplayer.api.events.state.BUFFERING) { 
    1437                                         _container.volume = _model.volume / 100; 
    1438                                         _container.muted = _model.mute; 
    1439                                 } 
    14401707                                if (newstate == jwplayer.api.events.state.IDLE) { 
    1441                                         clearInterval(_interval); 
    1442                                         _interval = null; 
     1708                                        _clearInterval(); 
    14431709                                        _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_MEDIA_COMPLETE); 
    14441710                                         
    … …  
    14771743                                return; 
    14781744                        } 
    1479                         if (!jwplayer.html5.utils.isNull(event.target)) { 
     1745                        if (!(event.target === undefined)) { 
    14801746                                if (_model.duration === 0) { 
    14811747                                        _model.duration = event.target.duration; 
    … …  
    14831749                                 
    14841750                                if (_state == jwplayer.api.events.state.PLAYING) { 
     1751                                        if (!_start && _container.readyState > 0) { 
     1752                                                _start = true; 
     1753                                                _container.currentTime = _model.playlist[_model.item].start; 
     1754                                                _container.volume = _model.volume / 100; 
     1755                                                _container.muted = _model.mute; 
     1756                                        } 
    14851757                                        _model.position = Math.round(event.target.currentTime * 10) / 10; 
    14861758                                        _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_MEDIA_TIME, { 
    … …  
    15091781                        bufferFill = bufferTime / _model.config.bufferlength * 100; 
    15101782                         
    1511                         // TODO: Buffer underrun 
    1512                         if (false) { 
    1513                                 if (bufferFill < 25 && _state == jwplayer.api.events.state.PLAYING) { 
    1514                                         _setState(jwplayer.api.events.state.BUFFERING); 
    1515                                         _bufferFull = false; 
    1516                                         if (!_container.seeking) { 
    1517                                                 _container.pause(); 
    1518                                         } 
    1519                                 } else if (bufferFill > 95 && _state == jwplayer.api.events.state.BUFFERING && _bufferFull === false && bufferTime > 0) { 
    1520                                         _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_MEDIA_BUFFER_FULL, {}); 
    1521                                 } 
    1522                         } 
    1523                          
    15241783                        if (_bufferFull === false) { 
    15251784                                _bufferFull = true; 
    1526                                 _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_MEDIA_BUFFER_FULL, {}); 
     1785                                _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_MEDIA_BUFFER_FULL); 
    15271786                        } 
    15281787                         
    … …  
    15321791                                } 
    15331792                                 
    1534                                 if (!jwplayer.html5.utils.isNull(bufferPercent)) { 
     1793                                if (!(bufferPercent === null)) { 
    15351794                                        _model.buffer = Math.round(bufferPercent); 
    15361795                                        _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_MEDIA_BUFFER, { 
    15371796                                                bufferPercent: Math.round(bufferPercent) 
    1538                                                 //bufferingComplete: _bufferingComplete, 
    1539                                                 //bufferFull: _bufferFull, 
    1540                                                 //bufferFill: bufferFill, 
    1541                                                 //bufferTime: bufferTime 
    15421797                                        }); 
    15431798                                } 
    … …  
    15491804                function _startInterval() { 
    15501805                        if (_interval === null) { 
    1551                                 _interval = window.setInterval(function() { 
     1806                                _interval = setInterval(function() { 
    15521807                                        _positionHandler({}); 
    15531808                                }, 100); 
    … …  
    15551810                } 
    15561811                 
     1812                function _clearInterval() { 
     1813                        clearInterval(_interval); 
     1814                        _interval = null; 
     1815                } 
    15571816                 
    15581817                function _errorHandler(event) { 
    … …  
    15601819                } 
    15611820                 
    1562                 this.getContainer = function() { 
     1821                this.getDisplayElement = function() { 
    15631822                        return _container; 
    15641823                }; 
    … …  
    15681827                                _container.play(); 
    15691828                                _setState(jwplayer.api.events.state.PLAYING); 
     1829                                _startInterval(); 
    15701830                        } 
    15711831                }; 
    … …  
    15901850                        _stopped = true; 
    15911851                        _container.pause(); 
    1592                         clearInterval(_interval); 
    1593                         _interval = undefined; 
     1852                        _clearInterval(); 
    15941853                        _model.position = 0; 
    15951854                        _setState(jwplayer.api.events.state.IDLE); 
    … …  
    16471906                /** Load a new video into the player. **/ 
    16481907                this.load = function(playlistItem) { 
    1649                         _container = _insertVideoTag(playlistItem); 
    1650                         for (var event in _events) { 
    1651                                 _container.addEventListener(event, function(evt) { 
    1652                                         _events[evt.type](evt); 
    1653                                 }, true); 
    1654                         } 
     1908                        _embed(playlistItem); 
     1909                         
     1910                        _bufferFull = false; 
     1911                        _bufferingComplete = false; 
     1912                        _start = false; 
     1913 
    16551914                        if (_container.style.display != 'none') { 
    16561915                                _container.style.display = 'block'; 
    16571916                        } 
    16581917                        _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_MEDIA_LOADED); 
    1659                         setTimeout(function() { 
    1660                                 _bufferFull = false; 
    1661                                 _bufferingComplete = false; 
    1662                                 _setState(jwplayer.api.events.state.BUFFERING); 
    1663                                 _startInterval(); 
    1664                                 try { 
    1665                                         _container.currentTime = 0; 
    1666                                 } catch (err) { 
    1667                                  
    1668                                 } 
    1669                         }, 25); 
    1670                 }; 
    1671                  
    1672                 function _insertVideoTag(playlistItem) { 
    1673                         //var _container = document.getElementById(player.id); 
     1918                        _setState(jwplayer.api.events.state.BUFFERING); 
     1919                        _positionHandler({}); 
     1920                }; 
     1921                 
     1922                _embed = function(playlistItem) { 
    16741923                        var vid = _container.ownerDocument.createElement("video"); 
    1675                         //vid.controls = "none"; 
    1676                         if (vid.autobuffer) { 
    1677                                 vid.autobuffer = _model.config.autoplay; 
    1678                         } else if (vid.autoplay) { 
    1679                                 vid.autoplay = _model.config.autoplay; 
    1680                         } 
     1924                        vid.preload = "none"; 
    16811925                        vid.loop = _model.config.repeat; 
    16821926                        for (var sourceIndex in playlistItem.levels) { 
    … …  
    16861930                                if (sourceModel.type === undefined) { 
    16871931                                        var extension = jwplayer.html5.utils.extension(sourceModel.file); 
    1688                                         if (extension == "ogv") { 
    1689                                                 extension = "ogg"; 
     1932                                        if (jwplayer.html5.extensionmap[extension] !== undefined) { 
     1933                                                source.type = jwplayer.html5.extensionmap[extension]; 
     1934                                        } else { 
     1935                                                source.type = 'video/' + extension + ';'; 
    16901936                                        } 
    1691                                         source.type = 'video/' + extension + ';'; 
    16921937                                } else { 
    16931938                                        source.type = sourceModel.type; 
    … …  
    16951940                                vid.appendChild(source); 
    16961941                        } 
    1697                         vid.width = _model.config.width; 
    1698                         vid.height = _model.config.height; 
    1699                         var styles = { 
    1700                                 position: 'absolute', 
    1701                                 width: _model.config.width + 'px', 
    1702                                 height: _model.config.height + 'px', 
    1703                                 top: 0, 
    1704                                 left: 0, 
    1705                                 'z-index': 0, 
    1706                                 margin: 'auto', 
    1707                                 display: 'block' 
    1708                         }; 
    1709                         for (var style in styles) { 
    1710                                 vid.style[style] = styles[style]; 
    1711                         } 
     1942                        vid.style.position = _container.style.position; 
     1943                        vid.style.top = _container.style.top; 
     1944                        vid.style.left = _container.style.left; 
     1945                        vid.style.width = _container.style.width; 
     1946                        vid.style.height = _container.style.height; 
     1947                        vid.volume = 0; 
    17121948                        _container.parentNode.replaceChild(vid, _container); 
    17131949                        vid.id = _container.id; 
    1714                         return vid; 
    1715                 } 
     1950                        _container = vid; 
     1951                        for (var event in _events) { 
     1952                                _container.addEventListener(event, function(evt) { 
     1953                                        _events[evt.type](evt); 
     1954                                }, true); 
     1955                        } 
     1956                }; 
     1957                 
     1958                this.embed = _embed; 
    17161959                 
    17171960                return this; 
    … …  
    17261969(function(jwplayer) { 
    17271970 
    1728         var _configurableStateVariables = ["width", "height", "start", "duration", "volume", "mute", "fullscreen", "item"]; 
    1729          
    1730         jwplayer.html5.model = function(container, options) { 
     1971        var _configurableStateVariables = ["width", "height", "start", "duration", "volume", "mute", "fullscreen", "item", "plugins"]; 
     1972         
     1973        jwplayer.html5.model = function(api, container, options) { 
     1974                var _model = { 
     1975                        media: undefined, 
     1976                        playlist: [], 
     1977                        state: jwplayer.api.events.state.IDLE, 
     1978                        position: 0, 
     1979                        buffer: 0, 
     1980                        config: { 
     1981                                width: 480, 
     1982                                height: 320, 
     1983                                item: 0, 
     1984                                skin: undefined, 
     1985                                file: undefined, 
     1986                                image: undefined, 
     1987                                start: 0, 
     1988                                duration: 0, 
     1989                                bufferlength: 5, 
     1990                                volume: 90, 
     1991                                mute: false, 
     1992                                fullscreen: false, 
     1993                                repeat: false, 
     1994                                autostart: false, 
     1995                                debug: undefined, 
     1996                                screencolor: undefined 
     1997                        } 
     1998                }; 
    17311999                var _media; 
    17322000                var _container = container; 
    17332001                var _eventDispatcher = new jwplayer.html5.eventdispatcher(); 
    1734                 jwplayer.utils.extend(this, _eventDispatcher); 
    1735                  
    1736                 jwplayer.utils.extend(this.config, options); 
    1737                  
    1738                 this.loadPlaylist = function(playlist, ready) { 
     2002                var _components = ["display", "controlbar"]; 
     2003                 
     2004                jwplayer.utils.extend(_model, _eventDispatcher); 
     2005                 
     2006                for (var option in options) { 
     2007                        switch (options[option]) { 
     2008                                case "": 
     2009                                        continue; 
     2010                                case "true": 
     2011                                        _model.config[option] = true; 
     2012                                        break; 
     2013                                case "false": 
     2014                                        _model.config[option] = false; 
     2015                                        break; 
     2016                                default: 
     2017                                        var config = _model.config; 
     2018                                        var path = option.split("."); 
     2019                                        for (var edge in path) { 
     2020                                                if (edge == path.length - 1) { 
     2021                                                        config[path[edge]] = options[option]; 
     2022                                                } else { 
     2023                                                        config[path[edge]] = {}; 
     2024                                                        config = config[path[edge]]; 
     2025                                                } 
     2026                                        } 
     2027                        } 
     2028                } 
     2029                for (var index in _configurableStateVariables) { 
     2030                        var configurableStateVariable = _configurableStateVariables[index]; 
     2031                        _model[configurableStateVariable] = _model.config[configurableStateVariable]; 
     2032                } 
     2033                 
     2034                var pluginorder = _model.plugins === undefined ? _components : _components.concat(_model.plugins); 
     2035                 
     2036                _model.plugins = { 
     2037                        order: pluginorder, 
     2038                        config: { 
     2039                                display: { 
     2040                                        position: jwplayer.html5.view.positions.OVER, 
     2041                                        screencolor: _model.config.screencolor 
     2042                                }, 
     2043                                controlbar: { 
     2044                                        position: jwplayer.html5.view.positions.BOTTOM 
     2045                                } 
     2046                        }, 
     2047                        object: {} 
     2048                }; 
     2049                 
     2050                for (var pluginIndex in _model.plugins.order) { 
     2051                        var pluginName = _model.plugins.order[pluginIndex]; 
     2052                        var pluginConfig = _model.config[pluginName] === undefined ? {} : _model.config[pluginName]; 
     2053                        _model.plugins.config[pluginName] = _model.plugins.config[pluginName] === undefined ? pluginConfig : jwplayer.utils.extend(_model.plugins.config[pluginName], pluginConfig); 
     2054                        if (_model.plugins.config[pluginName].position === undefined){ 
     2055                                _model.plugins.config[pluginName].position = jwplayer.html5.view.positions.OVER; 
     2056                        } 
     2057                } 
     2058                 
     2059                _model.loadPlaylist = function(playlist, ready) { 
    17392060                        ready = ready === null ? true : false; 
    1740                         this.playlist = new jwplayer.html5.playlist(playlist); 
     2061                        _model.playlist = new jwplayer.html5.playlist(playlist); 
    17412062                        if (ready) { 
    17422063                                _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_PLAYLIST_LOADED); 
    17432064                                _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_PLAYLIST_ITEM, { 
    1744                                         "item": this.config.item 
    1745                                 });              
    1746                         } 
    1747                         this.setActiveMediaProvider(this.playlist[this.index]); 
    1748                 }; 
    1749                  
    1750                 if (this.config.skin.length === 0) { 
    1751                         this.config.skin = ""; 
    1752                 } 
    1753                 for (var index in _configurableStateVariables) { 
    1754                         var configurableStateVariable = _configurableStateVariables[index]; 
    1755                         this[configurableStateVariable] = this.config[configurableStateVariable]; 
    1756                 } 
     2065                                        "item": _model.config.item 
     2066                                }); 
     2067                        } 
     2068                        _model.setActiveMediaProvider(_model.playlist[_model.item]); 
     2069                }; 
    17572070                 
    17582071                function forward(evt) { 
    17592072                        if (evt.type == jwplayer.api.events.JWPLAYER_MEDIA_LOADED) { 
    1760                                 _container = _media.getContainer(); 
     2073                                _container = _media.getDisplayElement(); 
    17612074                        } 
    17622075                        _eventDispatcher.sendEvent(evt.type, evt); 
    17632076                } 
    17642077                 
    1765                 this.setActiveMediaProvider = function(playlistItem) { 
     2078                _model.setActiveMediaProvider = function(playlistItem) { 
    17662079                        if (_media === undefined) { 
    1767                                 _media = new jwplayer.html5.mediavideo(this, _container); 
     2080                                _media = new jwplayer.html5.mediavideo(_model, _container); 
    17682081                                _media.addGlobalListener(forward); 
     2082                                if (_model.config.chromeless) { 
     2083                                        _media.embed(playlistItem); 
     2084                                } 
    17692085                        } 
    17702086                        return true; 
    17712087                }; 
    17722088                 
    1773                 this.getMedia = function() { 
     2089                _model.getMedia = function() { 
    17742090                        return _media; 
    17752091                }; 
    17762092                 
    1777                 return this; 
    1778         }; 
    1779          
    1780         jwplayer.html5.model.prototype = { 
    1781                 media: undefined, 
    1782                 components: {}, 
    1783                 playlist: [], 
    1784                 state: jwplayer.api.events.state.IDLE, 
    1785                 position: 0, 
    1786                 buffer: 0, 
    1787                 config: { 
    1788                         width: 480, 
    1789                         height: 320, 
    1790                         item: 0, 
    1791                         skin: undefined, 
    1792                         file: undefined, 
    1793                         image: undefined, 
    1794                         start: 0, 
    1795                         duration: 0, 
    1796                         bufferlength: 5, 
    1797                         volume: 90, 
    1798                         mute: false, 
    1799                         fullscreen: false, 
    1800                         repeat: false, 
    1801                         autostart: false, 
    1802                         debug: undefined, 
    1803                         screencolor: '' 
    1804                 } 
    1805         }; 
     2093                _model.setupPlugins = function() { 
     2094                        for (var plugin in _model.plugins.order) { 
     2095                                if (jwplayer.html5[_model.plugins.order[plugin]] !== undefined) { 
     2096                                        _model.plugins.object[_model.plugins.order[plugin]] = new jwplayer.html5[_model.plugins.order[plugin]](api, _model.plugins.config[_model.plugins.order[plugin]]); 
     2097                                } else { 
     2098                                        _model.plugins.object[_model.plugins.order[plugin]] = new window[_model.plugins.order[plugin]](api, _model.plugins.config[_model.plugins.order[plugin]]); 
     2099                                } 
     2100                        } 
     2101                }; 
     2102                 
     2103                return _model; 
     2104        }; 
     2105         
     2106         
    18062107})(jwplayer); 
    18072108/** 
    … …  
    18132114(function(jwplayer) { 
    18142115        jwplayer.html5.playlist = function(config) { 
    1815                 _playlist = []; 
     2116                var _playlist = []; 
    18162117                if (config.playlist && config.playlist.length > 0) { 
    18172118                        _playlist = config.playlist; 
    … …  
    18342135(function(jwplayer) { 
    18352136        jwplayer.html5.playlistitem = function(config) { 
    1836                 for (var property in this) { 
     2137                var _playlistitem = { 
     2138                        author: "", 
     2139                        date: "", 
     2140                        description: "", 
     2141                        image: "", 
     2142                        link: "", 
     2143                        mediaid: "", 
     2144                        tags: "", 
     2145                        title: "", 
     2146                        provider: "", 
     2147                         
     2148                        file: "", 
     2149                        streamer: "", 
     2150                        duration: -1, 
     2151                        start: 0, 
     2152                         
     2153                        currentLevel: -1, 
     2154                        levels: [] 
     2155                }; 
     2156                 
     2157                for (var property in _playlistitem) { 
    18372158                        if (config[property] !== undefined) { 
    1838                                 this[property] = config[property]; 
    1839                         } 
    1840                 } 
    1841                 if (this.levels.length === 0){ 
    1842                         this.levels[0] = new jwplayer.html5.playlistitemlevel(this); 
    1843                 } 
    1844                 return this; 
    1845         }; 
    1846          
    1847         jwplayer.html5.playlistitem.prototype = { 
    1848                 author: "", 
    1849                 date: "", 
    1850                 description: "", 
    1851                 image: "", 
    1852                 link: "", 
    1853                 mediaid: "", 
    1854                 tags: "", 
    1855                 title: "", 
    1856                 provider: "", 
    1857                  
    1858                 file: "", 
    1859                 streamer: "", 
    1860                 duration: -1, 
    1861                 start: 0, 
    1862                  
    1863                 currentLevel: -1, 
    1864                 levels: [] 
    1865         }; 
     2159                                _playlistitem[property] = config[property]; 
     2160                        } 
     2161                } 
     2162                if (_playlistitem.levels.length === 0) { 
     2163                        _playlistitem.levels[0] = new jwplayer.html5.playlistitemlevel(_playlistitem); 
     2164                } 
     2165                return _playlistitem; 
     2166        };       
    18662167})(jwplayer); 
    18672168/** 
    … …  
    18732174(function(jwplayer) { 
    18742175        jwplayer.html5.playlistitemlevel = function(config) { 
    1875                 for (var property in this) { 
     2176                var _playlistitemlevel = { 
     2177                        file: "", 
     2178                        streamer: "", 
     2179                        bitrate: 0, 
     2180                        width: 0 
     2181                }; 
     2182                 
     2183                for (var property in _playlistitemlevel) { 
    18762184                        if (config[property] !== undefined) { 
    1877                                 this[property] = config[property]; 
    1878                         } 
    1879                 } 
    1880                 return this; 
    1881         }; 
    1882          
    1883         jwplayer.html5.playlistitemlevel.prototype = { 
    1884                 file: "", 
    1885                 streamer: "", 
    1886                 bitrate: 0, 
    1887                 width: 0 
    1888         }; 
     2185                                _playlistitemlevel[property] = config[property]; 
     2186                        } 
     2187                } 
     2188                return _playlistitemlevel; 
     2189        }; 
     2190         
    18892191})(jwplayer); 
    18902192/** 
    … …  
    19212223                        if (_loaded) { 
    19222224                                return _components[component].settings; 
     2225                        } 
     2226                        return null; 
     2227                }; 
     2228 
     2229                this.getComponentLayout = function(component) { 
     2230                        if (_loaded) { 
     2231                                return _components[component].layout; 
    19232232                        } 
    19242233                        return null; 
    … …  
    19452254                /** Load the skin **/ 
    19462255                function _load() { 
    1947                         if (skinPath === "") { 
     2256                        if (skinPath === undefined) { 
    19482257                                _loadSkin(jwplayer.html5.defaultSkin().xml); 
    19492258                        } else { 
    … …  
    19672276                                var component = { 
    19682277                                        settings: {}, 
    1969                                         elements: {} 
     2278                                        elements: {}, 
     2279                                        layout: {} 
    19702280                                }; 
    19712281                                _skin[componentName] = component; 
    1972                                 var elements = components[componentIndex].getElementsByTagName('element'); 
     2282                                var elements = components[componentIndex].getElementsByTagName('elements')[0].getElementsByTagName('element'); 
    19732283                                for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) { 
    19742284                                        _loadImage(elements[elementIndex], componentName); 
    19752285                                } 
    1976                                 var settings = components[componentIndex].getElementsByTagName('setting'); 
    1977                                 for (var settingIndex = 0; settingIndex < settings.length; settingIndex++) { 
    1978                                         _skin[componentName].settings[settings[settingIndex].getAttribute("name")] = settings[settingIndex].getAttribute("value"); 
     2286                                var settingsElement = components[componentIndex].getElementsByTagName('settings')[0]; 
     2287                                if (settingsElement !== undefined && settingsElement.childNodes.length > 0) { 
     2288                                        var settings = settingsElement.getElementsByTagName('setting'); 
     2289                                        for (var settingIndex = 0; settingIndex < settings.length; settingIndex++) { 
     2290                                                _skin[componentName].settings[settings[settingIndex].getAttribute("name")] = settings[settingIndex].getAttribute("value"); 
     2291                                        } 
     2292                                } 
     2293                                var layout = components[componentIndex].getElementsByTagName('layout')[0]; 
     2294                                if (layout !== undefined && layout.childNodes.length > 0) { 
     2295                                        var groups = layout.getElementsByTagName('group'); 
     2296                                        for (var groupIndex = 0; groupIndex < groups.length; groupIndex++) { 
     2297                                                var group = groups[groupIndex]; 
     2298                                                _skin[componentName].layout[group.getAttribute("position")] = { 
     2299                                                        elements: [] 
     2300                                                }; 
     2301                                                for (var attributeIndex = 0; attributeIndex < group.attributes.length; attributeIndex++) { 
     2302                                                        var attribute = group.attributes[attributeIndex]; 
     2303                                                        _skin[componentName].layout[group.getAttribute("position")][attribute.name] = attribute.value; 
     2304                                                } 
     2305                                                var groupElements = group.getElementsByTagName('*'); 
     2306                                                for (var groupElementIndex = 0; groupElementIndex < groupElements.length; groupElementIndex++) { 
     2307                                                        var element = groupElements[groupElementIndex]; 
     2308                                                        _skin[componentName].layout[group.getAttribute("position")].elements.push({type:element.tagName}); 
     2309                                                        for (var attributeIndex = 0; attributeIndex < element.attributes.length; attributeIndex++) { 
     2310                                                                var attribute = element.attributes[attributeIndex]; 
     2311                                                                _skin[componentName].layout[group.getAttribute("position")].elements[groupElementIndex][attribute.name] = attribute.value; 
     2312                                                        } 
     2313                                                        if (_skin[componentName].layout[group.getAttribute("position")].elements[groupElementIndex].name === undefined){ 
     2314                                                                _skin[componentName].layout[group.getAttribute("position")].elements[groupElementIndex].name = element.tagName; 
     2315                                                        } 
     2316                                                } 
     2317                                        } 
    19792318                                } 
    19802319                                 
    … …  
    20072346                                imgUrl = [skinRoot, component, elementSource].join('/'); 
    20082347                        } 
    2009  
     2348                         
    20102349                        _skin[component].elements[elementName] = { 
    20112350                                height: 0, 
    … …  
    22222561})(jwplayer); 
    22232562/** 
    2224  * JW Player view component 
     2563 * Utility methods for the JW Player. 
    22252564 * 
    22262565 * @author zach 
    … …  
    22282567 */ 
    22292568(function(jwplayer) { 
    2230  
    2231         var _css = jwplayer.html5.utils.css; 
    2232          
    2233         jwplayer.html5.view = function(api, model, container) { 
    2234                 var _api = api; 
    2235                 var _model = model; 
    2236                 var _wrapper; 
    2237                 var _components = {}; 
    2238                  
    2239                 function createWrapper() { 
    2240                         _wrapper = document.createElement("div"); 
    2241                         _wrapper.id = container.id; 
    2242                         container.id = _wrapper.id + "_video"; 
    2243                                                  
    2244                         _css(_wrapper, { 
    2245                                 position: 'relative', 
    2246                                 height: _model.config.height + 'px', 
    2247                                 width: _model.config.width + 'px', 
    2248                                 margin: 'auto', 
    2249                                 padding: 0, 
    2250                                 'background-color': _model.config.screencolor 
    2251                         }); 
    2252                          
    2253                         _css(container, { 
    2254                                 position: 'absolute', 
    2255                                 width: _model.config.width + 'px', 
    2256                                 height: _model.config.height + 'px', 
    2257                                 top: 0, 
    2258                                 left: 0, 
    2259                                 'z-index': 0, 
    2260                                 margin: 'auto', 
    2261                                 display: 'block' 
    2262                         }); 
    2263                          
    2264                         jwplayer.utils.wrap(container, _wrapper); 
    2265                 } 
    2266                  
    2267                 function setupComponents() { 
    2268                         if ((_model.getMedia() === undefined) || !_model.getMedia().hasChrome || !_model.config.chromeless) { 
    2269                                 _components.display = new jwplayer.html5.display(_api, container, _model.config.screencolor); 
    2270                                 _components.controlbar = new jwplayer.html5.controlbar(_api, container); 
    2271                         } 
    2272                 } 
    2273                  
    2274                 this.setup = function() { 
    2275                         createWrapper(); 
    2276                         setupComponents(); 
    2277                 }; 
    2278                  
    2279                 this.resize = function(width, height) { 
    2280                  
    2281                 }; 
    2282                  
    2283                  
    2284         }; 
     2569        var _animations = {}; 
     2570         
     2571        jwplayer.html5.utils.animations = function() { 
     2572        }; 
     2573         
     2574        jwplayer.html5.utils.animations.transform = function(domelement, value) { 
     2575                domelement.style.webkitTransform = value; 
     2576                domelement.style.MozTransform = value; 
     2577                domelement.style.OTransform = value; 
     2578        }; 
     2579         
     2580        jwplayer.html5.utils.animations.transformOrigin = function(domelement, value) { 
     2581                domelement.style.webkitTransformOrigin = value; 
     2582                domelement.style.MozTransformOrigin = value; 
     2583                domelement.style.OTransformOrigin = value; 
     2584        }; 
     2585         
     2586        jwplayer.html5.utils.animations.rotate = function(domelement, deg) { 
     2587                jwplayer.html5.utils.animations.transform(domelement, ["rotate(", deg, "deg)"].join("")); 
     2588        }; 
     2589         
     2590        jwplayer.html5.utils.fadeTo = function(domelement, endAlpha, time, startAlpha, startTime) { 
     2591                // Interrupting 
     2592                if (_animations[domelement] != startTime && startTime !== undefined){ 
     2593                        return; 
     2594                }  
     2595                var currentTime = new Date().getTime(); 
     2596                if (startAlpha === undefined) { 
     2597                        startAlpha = domelement.style.opacity === "" ? 1 : domelement.style.opacity; 
     2598                } 
     2599                if (typeof startAlpha == "string"){ 
     2600                        startAlpha = parseInt(startAlpha, 10); 
     2601                }        
     2602                if (domelement.style.opacity == endAlpha && domelement.style.opacity !== ""){ 
     2603                        return; 
     2604                } 
     2605                if (startTime === undefined) { 
     2606                        startTime = currentTime; 
     2607                        _animations[domelement] = startTime;  
     2608                } 
     2609                var percentTime = (currentTime - startTime) / (time * 1000); 
     2610                percentTime = percentTime > 1 ? 1 : percentTime; 
     2611                var delta = endAlpha - startAlpha; 
     2612                var alpha = startAlpha + (percentTime * delta); 
     2613                if (alpha > 1){ 
     2614                        alpha = 1; 
     2615                } else if (alpha < 0) { 
     2616                        alpha = 0; 
     2617                } 
     2618                domelement.style.opacity = alpha; 
     2619                setTimeout(function() { 
     2620                        jwplayer.html5.utils.fadeTo(domelement, endAlpha, time, startAlpha, startTime); 
     2621                }, 100); 
     2622        }; 
     2623         
    22852624})(jwplayer); 
    22862625/**  
    … …  
    22932632 
    22942633        jwplayer.html5.api = function(container, options) { 
    2295                 var _model = new jwplayer.html5.model(container, options); 
    2296                 var _view = new jwplayer.html5.view(this, _model, container); 
    2297                 var _controller = new jwplayer.html5.controller(_model, _view, container); 
     2634                var _container = document.createElement('div'); 
     2635                container.parentNode.replaceChild(_container, container); 
     2636                _container.id = container.id; 
     2637                 
     2638                var _model = new jwplayer.html5.model(this, _container, options); 
     2639                var _view = new jwplayer.html5.view(this, _container, _model); 
     2640                var _controller = new jwplayer.html5.controller(this, _container, _model, _view); 
    22982641                 
    22992642                this.version = "1.0"; 
    2300                 this.id = container.id; 
     2643                this.id = _container.id; 
    23012644                this.skin = new jwplayer.html5.skin(); 
    23022645                 
    … …  
    23232666                this.jwGetWidth = _statevarFactory('width'); 
    23242667                this.jwGetHeight = _statevarFactory('height'); 
    2325                 this.jwGetFullscreen = _statevarFactory('buffer'); 
     2668                this.jwGetFullscreen = _statevarFactory('fullscreen'); 
    23262669                this.jwSetFullscreen = _controller.setFullscreen; 
    23272670                this.jwGetVolume = _statevarFactory('volume'); 
    … …  
    23552698                 
    23562699                this.skin.load(_model.config.skin, function() { 
    2357                         _view.setup(); 
     2700                        _model.loadPlaylist(_model.config, false); 
     2701                        _model.setupPlugins(); 
     2702                        _view.setup(_model.getMedia().getDisplayElement()); 
    23582703                        var evt = { 
    23592704                                id: this.id, 
    23602705                                version: this.version 
    23612706                        }; 
    2362                         _model.loadPlaylist(_model.config, false); 
    23632707                        _controller.sendEvent(jwplayer.api.events.JWPLAYER_READY, evt); 
    23642708                        if (playerReady !== undefined) { 
    … …  
    23692713                                window[_model.config.playerReady](evt); 
    23702714                        } 
     2715                         
    23712716                        _model.sendEvent(jwplayer.api.events.JWPLAYER_PLAYLIST_LOADED); 
    23722717                        _model.sendEvent(jwplayer.api.events.JWPLAYER_PLAYLIST_ITEM, { 
    … …  
    23742719                        }); 
    23752720                         
    2376                         if (_model.config.autostart === true) { 
     2721                        if (_model.config.autostart === true && !_model.config.chromeless) { 
    23772722                                _controller.play(); 
    23782723                        } 
Note: See TracChangeset for help on using the changeset viewer.