Changeset 2043

Timestamp:

01/06/12 14:47:17 (17 months ago)

Author:

pablo

Message:

Adds preliminary support for the instream api in HTML5

Location:

branches/fl5_instream

Files:

• js/bin-debug/jwplayer.js (modified) (16 diffs)
• js/src/api/jwplayer.api.instream.js (modified) (2 diffs)
• js/src/html5/jwplayer.html5.api.js (modified) (2 diffs)
• js/src/html5/jwplayer.html5.instream.js (added)
• js/src/html5/jwplayer.html5.mediavideo.js (modified) (6 diffs)
• js/src/html5/jwplayer.html5.model.js (modified) (1 diff)
• js/src/html5/jwplayer.html5.view.js (modified) (3 diffs)
• js/src/jwplayer.js (modified) (1 diff)
• js/test/examples/instream.html (modified) (4 diffs)
• player.swf (modified) (previous)
• src/com/longtailvideo/jwplayer/player/JavascriptInstreamAPI.as (modified) (1 diff)
• src/com/longtailvideo/jwplayer/player/PlayerVersion.as (modified) (1 diff)
• src/com/longtailvideo/jwplayer/view/View.as (modified) (1 diff)

branches/fl5_instream/js/bin-debug/jwplayer.js

@@ -19 +19 @@
 var $jw = jwplayer;
 
-jwplayer.version = '5.9.2042';
+jwplayer.version = '5.9.2043';
 
 // "Shiv" method for older IE browsers; required for parsing media tags
@@ -2994 +2994 @@
                 
                 function _addInternalListener(player, type) {
-                        _player.instream_jwAddEventListener(type, 'function(dat) { jwplayer("' + _api.id + '").dispatchInstreamEvent("' + type + '", dat); }');
+                        _player.jwInstreamAddEventListener(type, 'function(dat) { jwplayer("' + _api.id + '").dispatchInstreamEvent("' + type + '", dat); }');
                 };
 
@@ -3092 +3092 @@
                 
                 this.play = function(state) {
-                        _player.instream_jwPlay(state);
+                        _player.jwInstreamPlay(state);
                 };
                 this.pause= function(state) {
-                        _player.instream_jwPause(state);
+                        _player.jwInstreamPause(state);
                 };
                 this.seek = function(pos) {
-                        _player.instream_jwSeek(pos);
+                        _player.jwInstreamSeek(pos);
                 };
                 this.destroy = function() {
-                        _player.instream_jwDestroy();
+                        _player.jwInstreamDestroy();
                 };
                 this.getState = function() {
-                        return _player.instream_jwGetState();
+                        return _player.jwInstreamGetState();
                 }
                 this.getDuration = function() {
-                        return _player.instream_jwGetDuration();
+                        return _player.jwInstreamGetDuration();
                 }
                 this.getPosition = function() {
-                        return _player.instream_jwGetPosition();
+                        return _player.jwInstreamGetPosition();
                 }
 
@@ -4236 +4236 @@
                 var _falseFullscreen = false;
                 var _normalscreenWidth, _normalscreenHeight;
+                var _instremArea;
                 
                 function createWrapper() {
@@ -4288 +4289 @@
                         _box.id = _wrapper.id + "_displayarea";
                         _wrapper.appendChild(_box);
+                        
+                        _instreamArea = document.createElement("div");
+                        _instreamArea.id = _wrapper.id + "_instreamarea";
+                        _css(_instreamArea, {
+                                overflow: "hidden",
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                bottom: 0,
+                                right: 0,
+                                background: '000000',
+                                display: 'none'
+                        });
+                        _wrapper.appendChild(_instreamArea);
                 }
                 
@@ -4684 +4699 @@
                         return false;
                 }
-                
+                ///             public function setupInstream(_instreamDisplay:DisplayObject, plugin:IPlugin):void {
+                
+                this.setupInstream = function(instreamDisplay) {
+                        _instreamArea.style.display = "block";
+                        _box.style.display = "none";
+                        _instreamArea.appendChild(instreamDisplay);
+                }
+                
+                ///                     public function destroyInstream():void {
+                var _destroyInstream = this.destroyInstream = function() {
+                        _instreamArea.style.display = "none";
+                        _box.style.display = "block";
+                }
         };
         
@@ -7013 +7040 @@
         };
 })(jwplayer);
+/** 
+ * API to control instream playback without interrupting currently playing video
+ *
+ * @author pablo
+ * @version 5.9
+ */
+(function(jwplayer) {
+        var _utils = jwplayer.utils;
+        
+        jwplayer.html5.instream = function(item, options, api, model, view, controller) {
+                var _item = new jwplayer.html5.playlistitem(item),
+                        _api = api,
+                        _options = options,
+                        _model = model,
+                        _view = view,
+                        _controller = controller,
+                        _currentItem = _model.item,
+                        _currentPlaylist = _model.playlist,
+                        _video, _oldsrc, _oldsources, _oldpos,
+                        _self = this,
+                        _provider, _cbar,
+                        _dispatcher = new jwplayer.html5.eventdispatcher();
+                
+
+                function _init() {
+                        var _thing = document.createElement("div");
+                        _thing.id = _self.id;
+
+                        _controller.pause();
+                        _video = _controller.detachMedia();
+//                      _video.style.zIndex = 10;
+
+                        
+                        _oldsrc = _video.src;
+                        _oldsources = _video.getElementsByTagName("source");
+                        _oldpos = _video.currentPosition;
+                        
+                        _view.setupInstream(_thing);
+
+                        _setupProvider();
+                        
+                        _cbar = new jwplayer.html5.controlbar(_self, _utils.extend({},_model.plugins.config.controlbar, {position:"OVER"}));
+                        
+                        _thing.appendChild(_cbar.getDisplayElement());
+                        
+                        
+                        _resize(_api.jwGetWidth(), _api.jwGetHeight());
+
+                        _provider.load(_item);
+                        
+                        return;
+                };
+                
+                function _setupProvider() {
+                        _provider = new jwplayer.html5.mediavideo(_model, _model.getMedia() ? _model.getMedia().getDisplayElement() : _model.container);
+                        _provider.addGlobalListener(
+                                function(evt) {
+                                        _dispatcher.sendEvent(evt.type, evt);
+                                }
+                        );
+                        _provider.addEventListener(jwplayer.api.events.JWPLAYER_MEDIA_COMPLETE, function(evt) {
+                                _self.jwInstreamDestroy();
+                        });
+                }
+                
+                function _resize(width, height) {
+                        _css(_cbar.getDisplayElement(), {
+                                position: "absolute",
+                                width: width,
+                                height: height,
+                                zIndex: 1000
+                        });
+                        _cbar.resize(width, height);
+                }
+                
+                this.jwInstreamAddEventListener = _dispatcher.addEventListener; 
+                this.jwInstreamRemoveEventListener = _dispatcher.removeEventListener; 
+                
+                this.jwInstreamPlay = function() {
+                }
+
+                this.jwInstreamPause = function() {
+                }
+                
+                this.jwInstreamSeek = function(position) {
+                }
+
+                
+                this.jwInstreamGetState = function() {
+                }
+
+                this.jwInstreamGetPosition = function() {
+                }
+
+                this.jwInstreamGetDuration = function() {
+                }
+
+                this.jwInstreamDestroy = function() {
+                        _video.pause();
+                        _video.src = _oldsrc;
+                        for (var i=0; i < _oldsources.length; i++) {
+                                _video.appendChild(_oldsources[i]);
+                        }
+                        _video.currentPosition = _oldpos;
+                        _video.load();
+                        _view.destroyInstream();
+                        
+                        _controller.attachMedia();
+//                      _model.getMedia().load(_currentPlaylist[_currentItem]);
+//                      _video.pause();
+                        //_utils.setOuterHTML(_video, _videoHTML);
+                }
+                
+                
+                /** Duplicate main html5 api **/
+                this.skin = _api.skin;
+                
+                this.jwPlay = function(state) {};
+                this.jwPause = function(state) {};
+                this.jwSeek = function(position) {};
+                this.jwStop = function() {};
+                this.jwGetItem = function() {};
+                this.jwGetPosition = function() {};
+                this.jwGetDuration = function() {};
+
+                this.jwGetWidth = _api.jwGetWidth;
+                this.jwGetHeight = _api.jwGetHeight;
+
+                this.jwGetFullscreen = _api.jwGetFullscreen;
+                this.jwSetFullscreen = _api.jwSetFullscreen;
+
+                this.jwGetVolume = _api.jwGetVolume;
+                this.jwSetVolume = _api.jwSetVolume;
+
+                this.jwGetMute = _api.jwGetMute;
+                this.jwSetMute = _api.setMute;
+
+                this.jwGetState = function() {};
+                
+                this.jwGetPlaylist = function() {
+                        return [_item];
+                };
+                this.jwGetPlaylistIndex = function() {
+                        return 0;
+                };
+                
+                this.jwAddEventListener = function(type, handler) {
+                        _dispatcher.addEventListener(type, handler);
+                }
+                this.jwRemoveEventListener = _dispatcher.removeEventListener;
+                
+                this.id = _api.id;
+                
+                _init();
+                
+                return this;
+        };
+})(jwplayer);
+
 /**
  * JW Player logo component
@@ -7208 +7394 @@
         
         var _utils = jwplayer.utils;
-        var _css = _utils.css;
         var _isMobile = _utils.isMobile();
         
@@ -7253 +7438 @@
                         _emptied = false,
                         _attached = false,
+                        _userDuration = false,
                         _bufferingComplete, _bufferFull,
                         _sourceError;
@@ -7276 +7462 @@
                         
                         _currentItem = item;
+                        _userDuration = (_currentItem.duration > 0);
+                        _model.duration = _currentItem.duration;
+                        
                         _utils.empty(_video);
 
@@ -7314 +7503 @@
                                 item.start = 0;
                         }
-                        _model.duration = item.duration;
                         _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_MEDIA_LOADED);
                         if((!_isMobile && item.levels.length == 1) || !_emptied) {
@@ -7491 +7679 @@
                 /** Initializes the HTML5 video and audio media provider **/
                 function _init() {
-                        _video = document.createElement("video");
+                        if (!_video) {
+                                if (_container.tagName.toLowerCase() == "video") {
+                                        _video = _container;
+                                } else {
+                                        _video = document.createElement("video");
+                                }
+                        }
                         _state = jwplayer.api.events.state.IDLE;
  
@@ -7641 +7835 @@
                                         duration: newDuration
                                 };
-                        if ( (_model.duration < newDuration || isNaN(_model.duration)) && event.target.duration != Infinity) {
-                                _model.duration = newDuration;
+                        if (!_userDuration) {
+                                if ( (_model.duration < newDuration || isNaN(_model.duration)) && event.target.duration != Infinity) {
+                                        _model.duration = newDuration;
+                                }
                         }
                         _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_MEDIA_META, {
@@ -8001 +8197 @@
                         position: 0,
                         buffer: 0,
+                        container: _container,
                         config: {
                                 width: 480,
@@ -9134 +9331 @@
  *
  * @author zach
- * @version 5.8
+ * @version 5.9
  */
 (function(jwplayer) {
@@ -9247 +9444 @@
                 _api.jwDisplayHide = _componentCommandFactory("display", "hide");
                 
+                
+                var _instreamPlayer;
+                
+                //InStream API
+                _api.jwLoadInstream = function(item, options) {
+                        _instreamPlayer = new jwplayer.html5.instream(item, options, _api, _model, _view, _controller);
+                }
+                _api.jwInstreamDestroy = function() {
+                        if (_instreamPlayer) {
+                                _instreamPlayer.jwInstreamDestroy();
+                                _instreamPlayer = null;
+                        }
+                }
+                
+                _api.jwInstreamAddEventListener = _callInstream('jwInstreamAddEventListener');
+                _api.jwInstreamRemoveEventListener = _callInstream('jwInstreamRemoveEventListener');
+                _api.jwInstreamGetState = _callInstream('jwInstreamGetState');
+                _api.jwInstreamGetDuration = _callInstream('jwInstreamGetDuration');
+                _api.jwInstreamGetPosition = _callInstream('jwInstreamGetPosition');
+                _api.jwInstreamPlay = _callInstream('jwInstreamPlay');
+                _api.jwInstreamPause = _callInstream('jwInstreamPause');
+                _api.jwInstreamSeek = _callInstream('jwInstreamSeek');
+                
+                function _callInstream(funcName) {
+                        return function() {
+                                if (_instreamPlayer && typeof _instreamPlayer[funcName] == "function") {
+                                        return _instreamPlayer[funcName].apply(this, arguments);
+                                } else {
+                                        _utils.log("Could not call instream method - instream API not initialized");
+                                }
+                        }
+                }
+                
+                
                 //UNIMPLEMENTED
                 _api.jwGetLevel = function() {

branches/fl5_instream/js/src/api/jwplayer.api.instream.js

@@ -21 +21 @@
                 
                 function _addInternalListener(player, type) {
-                        _player.instream_jwAddEventListener(type, 'function(dat) { jwplayer("' + _api.id + '").dispatchInstreamEvent("' + type + '", dat); }');
+                        _player.jwInstreamAddEventListener(type, 'function(dat) { jwplayer("' + _api.id + '").dispatchInstreamEvent("' + type + '", dat); }');
                 };
 
@@ -119 +119 @@
                 
                 this.play = function(state) {
-                        _player.instream_jwPlay(state);
+                        _player.jwInstreamPlay(state);
                 };
                 this.pause= function(state) {
-                        _player.instream_jwPause(state);
+                        _player.jwInstreamPause(state);
                 };
                 this.seek = function(pos) {
-                        _player.instream_jwSeek(pos);
+                        _player.jwInstreamSeek(pos);
                 };
                 this.destroy = function() {
-                        _player.instream_jwDestroy();
+                        _player.jwInstreamDestroy();
                 };
                 this.getState = function() {
-                        return _player.instream_jwGetState();
+                        return _player.jwInstreamGetState();
                 }
                 this.getDuration = function() {
-                        return _player.instream_jwGetDuration();
+                        return _player.jwInstreamGetDuration();
                 }
                 this.getPosition = function() {
-                        return _player.instream_jwGetPosition();
+                        return _player.jwInstreamGetPosition();
                 }
 

branches/fl5_instream/js/src/html5/jwplayer.html5.api.js

@@ -3 +3 @@
  *
  * @author zach
- * @version 5.8
+ * @version 5.9
  */
 (function(jwplayer) {
@@ -116 +116 @@
                 _api.jwDisplayHide = _componentCommandFactory("display", "hide");
                 
+                
+                var _instreamPlayer;
+                
+                //InStream API
+                _api.jwLoadInstream = function(item, options) {
+                        _instreamPlayer = new jwplayer.html5.instream(item, options, _api, _model, _view, _controller);
+                }
+                _api.jwInstreamDestroy = function() {
+                        if (_instreamPlayer) {
+                                _instreamPlayer.jwInstreamDestroy();
+                                _instreamPlayer = null;
+                        }
+                }
+                
+                _api.jwInstreamAddEventListener = _callInstream('jwInstreamAddEventListener');
+                _api.jwInstreamRemoveEventListener = _callInstream('jwInstreamRemoveEventListener');
+                _api.jwInstreamGetState = _callInstream('jwInstreamGetState');
+                _api.jwInstreamGetDuration = _callInstream('jwInstreamGetDuration');
+                _api.jwInstreamGetPosition = _callInstream('jwInstreamGetPosition');
+                _api.jwInstreamPlay = _callInstream('jwInstreamPlay');
+                _api.jwInstreamPause = _callInstream('jwInstreamPause');
+                _api.jwInstreamSeek = _callInstream('jwInstreamSeek');
+                
+                function _callInstream(funcName) {
+                        return function() {
+                                if (_instreamPlayer && typeof _instreamPlayer[funcName] == "function") {
+                                        return _instreamPlayer[funcName].apply(this, arguments);
+                                } else {
+                                        _utils.log("Could not call instream method - instream API not initialized");
+                                }
+                        }
+                }
+                
+                
                 //UNIMPLEMENTED
                 _api.jwGetLevel = function() {

branches/fl5_instream/js/src/html5/jwplayer.html5.mediavideo.js

@@ -16 +16 @@
         
         var _utils = jwplayer.utils;
-        var _css = _utils.css;
         var _isMobile = _utils.isMobile();
         
@@ -61 +60 @@
                         _emptied = false,
                         _attached = false,
+                        _userDuration = false,
                         _bufferingComplete, _bufferFull,
                         _sourceError;
@@ -84 +84 @@
                         
                         _currentItem = item;
+                        _userDuration = (_currentItem.duration > 0);
+                        _model.duration = _currentItem.duration;
+                        
                         _utils.empty(_video);
 
@@ -122 +125 @@
                                 item.start = 0;
                         }
-                        _model.duration = item.duration;
                         _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_MEDIA_LOADED);
                         if((!_isMobile && item.levels.length == 1) || !_emptied) {
@@ -299 +301 @@
                 /** Initializes the HTML5 video and audio media provider **/
                 function _init() {
-                        _video = document.createElement("video");
+                        if (!_video) {
+                                if (_container.tagName.toLowerCase() == "video") {
+                                        _video = _container;
+                                } else {
+                                        _video = document.createElement("video");
+                                }
+                        }
                         _state = jwplayer.api.events.state.IDLE;
  
@@ -449 +457 @@
                                         duration: newDuration
                                 };
-                        if ( (_model.duration < newDuration || isNaN(_model.duration)) && event.target.duration != Infinity) {
-                                _model.duration = newDuration;
+                        if (!_userDuration) {
+                                if ( (_model.duration < newDuration || isNaN(_model.duration)) && event.target.duration != Infinity) {
+                                        _model.duration = newDuration;
+                                }
                         }
                         _eventDispatcher.sendEvent(jwplayer.api.events.JWPLAYER_MEDIA_META, {

branches/fl5_instream/js/src/html5/jwplayer.html5.model.js

@@ -17 +17 @@
                         position: 0,
                         buffer: 0,
+                        container: _container,
                         config: {
                                 width: 480,

branches/fl5_instream/js/src/html5/jwplayer.html5.view.js

@@ -23 +23 @@
                 var _falseFullscreen = false;
                 var _normalscreenWidth, _normalscreenHeight;
+                var _instremArea;
                 
                 function createWrapper() {
@@ -75 +76 @@
                         _box.id = _wrapper.id + "_displayarea";
                         _wrapper.appendChild(_box);
+                        
+                        _instreamArea = document.createElement("div");
+                        _instreamArea.id = _wrapper.id + "_instreamarea";
+                        _css(_instreamArea, {
+                                overflow: "hidden",
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                bottom: 0,
+                                right: 0,
+                                background: '000000',
+                                display: 'none'
+                        });
+                        _wrapper.appendChild(_instreamArea);
                 }
                 
@@ -471 +486 @@
                         return false;
                 }
-                
+                ///             public function setupInstream(_instreamDisplay:DisplayObject, plugin:IPlugin):void {
+                
+                this.setupInstream = function(instreamDisplay) {
+                        _instreamArea.style.display = "block";
+                        _box.style.display = "none";
+                        _instreamArea.appendChild(instreamDisplay);
+                }
+                
+                ///                     public function destroyInstream():void {
+                var _destroyInstream = this.destroyInstream = function() {
+                        _instreamArea.style.display = "none";
+                        _box.style.display = "block";
+                }
         };
         

branches/fl5_instream/js/src/jwplayer.js

@@ -11 +11 @@
 var $jw = jwplayer;
 
-jwplayer.version = '5.9.2042';
+jwplayer.version = '5.9.2043';
 
 // "Shiv" method for older IE browsers; required for parsing media tags

branches/fl5_instream/js/test/examples/instream.html

@@ -23 +23 @@
             document.write("<h1>" + document.title + "</h1>");
         </script>
-        <p>
-            This sets up a player for IE9, FF, Chrome, Safari, and Opera, however, playback will fail in FF and Opera. IE < 9 will simply display "HTML5 Player should replace this".
-        </p>
-
-        <hr/>
 
           <form>
@@ -238 +233 @@
                         stretching: stretching,
                         width: playlist == "none" ? 480 : 680,
-                                        repeat: repeat
+                                        repeat: repeat,
+                                        plugins: {
+//                                              'hd-2': { file: '/testing/files/oorlogswinter.mp4' }
+                                        }
                     };
                     if (skin) {
@@ -254 +252 @@
                                                         {file:"http://content.bitsontherun.com/videos/yYul4DRz-1Lq5Mnwq.webm"}
                                         ],
-                                        duration: 15
+                                        duration: 5
                                 }, instreamOptions);
 
@@ -264 +262 @@
                         document.getElementById("instreamInit").style.display = "none";
                                         setupEvents();
-        
                                 } else {
                                         alert("Instream Player not present");

branches/fl5_instream/src/com/longtailvideo/jwplayer/player/JavascriptInstreamAPI.as

@@ -47 +47 @@
                         try {
                                 // Event handlers
-                                ExternalInterface.addCallback("instream_jwAddEventListener", js_addEventListener);
-                                ExternalInterface.addCallback("instream_jwRemoveEventListener", js_removeEventListener);
+                                ExternalInterface.addCallback("jwInstreamAddEventListener", js_addEventListener);
+                                ExternalInterface.addCallback("jwInstreamRemoveEventListener", js_removeEventListener);
                                 
                                 // Getters
-                                ExternalInterface.addCallback("instream_jwGetState", js_getState);
-                                ExternalInterface.addCallback("instream_jwGetDuration", js_getDuration);
-                                ExternalInterface.addCallback("instream_jwGetPosition", js_getPosition);
+                                ExternalInterface.addCallback("jwInstreamGetState", js_getState);
+                                ExternalInterface.addCallback("jwInstreamGetDuration", js_getDuration);
+                                ExternalInterface.addCallback("jwInstreamGetPosition", js_getPosition);
 
                                 // Player API Calls
-                                ExternalInterface.addCallback("instream_jwPlay", js_play);
-                                ExternalInterface.addCallback("instream_jwPause", js_pause);
-                                ExternalInterface.addCallback("instream_jwSeek", js_seek);
+                                ExternalInterface.addCallback("jwInstreamPlay", js_play);
+                                ExternalInterface.addCallback("jwInstreamPause", js_pause);
+                                ExternalInterface.addCallback("jwInstreamSeek", js_seek);
                                 
                                 // Instream API
-                                ExternalInterface.addCallback("instream_jwDestroy", js_destroyInstream);
+                                ExternalInterface.addCallback("jwInstreamDestroy", js_destroyInstream);
                                 
                         } catch(e:Error) {

branches/fl5_instream/src/com/longtailvideo/jwplayer/player/PlayerVersion.as

@@ -3 +3 @@
         
         public class PlayerVersion {
-                protected static var _version:String = '5.9.2042';
+                protected static var _version:String = '5.9.2043';
                 
                 public static function get version():String {

branches/fl5_instream/src/com/longtailvideo/jwplayer/view/View.as

@@ -613 +613 @@
                 }
                 
-                public function setupInstream(_instreamDisplay:DisplayObject, plugin:IPlugin):void {
+                public function setupInstream(instreamDisplay:DisplayObject, plugin:IPlugin):void {
                         _instreamPlugin = plugin;
-                        if (_instreamDisplay) {
-                                _instreamLayer.addChild(_instreamDisplay);
+                        if (instreamDisplay) {
+                                _instreamLayer.addChild(instreamDisplay);
                         }
                         try {