Changeset 2067

Timestamp:

01/13/12 13:50:32 (17 months ago)

Author:

pablo

Message:

• Fixes jumpy image loading in HTML5 (1477)
• Cleans up iOS play sequence (1409)
• Adds a fade animation to preview image load (1566)

Location:

trunk/fl5

Files:

• js/bin-debug/jwplayer.js (modified) (7 diffs)
• js/src/html5/jwplayer.html5.display.js (modified) (3 diffs)
• js/src/html5/jwplayer.html5.view.js (modified) (1 diff)
• js/src/jwplayer.js (modified) (1 diff)
• js/src/utils/jwplayer.utils.js (modified) (2 diffs)
• player.swf (modified) (previous)
• src/com/longtailvideo/jwplayer/player/PlayerVersion.as (modified) (1 diff)
• src/com/longtailvideo/jwplayer/view/View.as (modified) (6 diffs)

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

@@ -19 +19 @@
 var $jw = jwplayer;
 
-jwplayer.version = '5.9.2058';
+jwplayer.version = '5.9.2067';
 
 // "Shiv" method for older IE browsers; required for parsing media tags
@@ -629 +629 @@
                                 if (style.width/parentWidth > 0.95) {
                                         transform = true;
-                                        xscale = Math.ceil(1000 * parentWidth / style.width) / 1000;
+                                        xscale = Math.ceil(100 * parentWidth / style.width) / 100;
                                         yscale = 1;
                                         style.width = parentWidth;
@@ -640 +640 @@
                                         transform = true;
                                         xscale = 1;
-                                        yscale = Math.ceil(1000 * parentHeight / style.height) / 1000;
+                                        yscale = Math.ceil(100 * parentHeight / style.height) / 100;
                                         style.height = parentHeight;
                                 }
@@ -4594 +4594 @@
                         var media = _model.getMedia().getDisplayElement();
                         if (media && media.tagName.toLowerCase() == "video") {
+                                if (!media.videoWidth || !media.videoHeight) {
+                                        media.style.opacity = 0;
+                                        return;
+                                }
                                 media.style.position = "absolute";
+                                _utils.fadeTo(media, 1, 0.25);
                                 if (media.parentNode) {
                                         media.parentNode.style.left = _box.style.left;
@@ -6408 +6413 @@
                 var _showing = true;
                 var _lastSent;
+                var _imageLoading = false;
                 var _hiding = false;
                 var _ready = false;
@@ -6565 +6571 @@
                         _imageHeight = _display.display_image.naturalHeight;
                         _stretch();
+                        _css(_display.display_image, {
+                                display: "block",
+                                opacity: 0
+                        });
+                        _utils.fadeTo(_display.display_image, 1, 0.1);
+                        _imageLoading = false;
                 }
                 
@@ -6780 +6792 @@
                 
                 function _showImage() {
-                        if (_api.jwGetPlaylist()[_api.jwGetPlaylistIndex()] && _api.jwGetPlaylist()[_api.jwGetPlaylistIndex()].image) {
-                                _css(_display.display_image, {
-                                        display: "block"
-                                });
-                                _display.display_image.src = _utils.getAbsolutePath(_api.jwGetPlaylist()[_api.jwGetPlaylistIndex()].image);
+                        if (_api.jwGetPlaylist()[_api.jwGetPlaylistIndex()]) {
+                                var newsrc = _api.jwGetPlaylist()[_api.jwGetPlaylistIndex()].image;
+                                if (newsrc) {
+                                        if (newsrc != _display.display_image.src) {
+                                                _display.display_image.style.display = "none";
+                                                _imageLoading = true;
+                                                _display.display_image.src = _utils.getAbsolutePath(_api.jwGetPlaylist()[_api.jwGetPlaylistIndex()].image);
+                                        } else if (!_imageLoading) {
+                                                _display.display_image.style.display = "block";
+                                                _utils.fadeTo(_display.display_image, 1, 0.1);
+                                        }
+                                        
+                                }
                         }
                 }

trunk/fl5/js/src/html5/jwplayer.html5.display.js

@@ -42 +42 @@
                 var _showing = true;
                 var _lastSent;
+                var _imageLoading = false;
                 var _hiding = false;
                 var _ready = false;
@@ -199 +200 @@
                         _imageHeight = _display.display_image.naturalHeight;
                         _stretch();
+                        _css(_display.display_image, {
+                                display: "block",
+                                opacity: 0
+                        });
+                        _utils.fadeTo(_display.display_image, 1, 0.1);
+                        _imageLoading = false;
                 }
                 
@@ -414 +421 @@
                 
                 function _showImage() {
-                        if (_api.jwGetPlaylist()[_api.jwGetPlaylistIndex()] && _api.jwGetPlaylist()[_api.jwGetPlaylistIndex()].image) {
-                                _css(_display.display_image, {
-                                        display: "block"
-                                });
-                                _display.display_image.src = _utils.getAbsolutePath(_api.jwGetPlaylist()[_api.jwGetPlaylistIndex()].image);
+                        if (_api.jwGetPlaylist()[_api.jwGetPlaylistIndex()]) {
+                                var newsrc = _api.jwGetPlaylist()[_api.jwGetPlaylistIndex()].image;
+                                if (newsrc) {
+                                        if (newsrc != _display.display_image.src) {
+                                                _display.display_image.style.display = "none";
+                                                _imageLoading = true;
+                                                _display.display_image.src = _utils.getAbsolutePath(_api.jwGetPlaylist()[_api.jwGetPlaylistIndex()].image);
+                                        } else if (!_imageLoading) {
+                                                _display.display_image.style.display = "block";
+                                                _utils.fadeTo(_display.display_image, 1, 0.1);
+                                        }
+                                        
+                                }
                         }
                 }

trunk/fl5/js/src/html5/jwplayer.html5.view.js

@@ -335 +335 @@
                         var media = _model.getMedia().getDisplayElement();
                         if (media && media.tagName.toLowerCase() == "video") {
+                                if (!media.videoWidth || !media.videoHeight) {
+                                        media.style.opacity = 0;
+                                        return;
+                                }
                                 media.style.position = "absolute";
+                                _utils.fadeTo(media, 1, 0.25);
                                 if (media.parentNode) {
                                         media.parentNode.style.left = _box.style.left;

trunk/fl5/js/src/jwplayer.js

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

trunk/fl5/js/src/utils/jwplayer.utils.js

@@ -604 +604 @@
                                 if (style.width/parentWidth > 0.95) {
                                         transform = true;
-                                        xscale = Math.ceil(1000 * parentWidth / style.width) / 1000;
+                                        xscale = Math.ceil(100 * parentWidth / style.width) / 100;
                                         yscale = 1;
                                         style.width = parentWidth;
@@ -615 +615 @@
                                         transform = true;
                                         xscale = 1;
-                                        yscale = Math.ceil(1000 * parentHeight / style.height) / 1000;
+                                        yscale = Math.ceil(100 * parentHeight / style.height) / 100;
                                         style.height = parentHeight;
                                 }

trunk/fl5/src/com/longtailvideo/jwplayer/player/PlayerVersion.as

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

trunk/fl5/src/com/longtailvideo/jwplayer/view/View.as

@@ -63 +63 @@
                 protected var _backgroundLayer:MovieClip;
                 protected var _mediaLayer:MovieClip;
+                protected var _mediaFade:Animations;
                 protected var _imageLayer:MovieClip;
+                protected var _imageFade:Animations;
+
                 protected var _componentsLayer:MovieClip;
                 protected var _pluginsLayer:MovieClip;
@@ -182 +185 @@
                         layoutManager = new PlayerLayoutManager(_player);
                         setupRightClick();
+
+                        stateHandler();
 
                         redraw();
@@ -257 +262 @@
 
                         _mediaLayer = setupLayer("media", 1, _maskedLayers);
-                        _mediaLayer.visible = false;
+                        _mediaLayer.alpha = 0;
+                        _mediaFade = new Animations(_mediaLayer);
 
                         _imageLayer = setupLayer("image", 1, _maskedLayers);
@@ -264 +270 @@
                         _image.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, imageError);
                         _imageLayer.addChild(_image);
+                        _imageLayer.alpha = 0;
+                        _imageFade = new Animations(_imageLayer);
 
                         imageDelay.addEventListener(TimerEvent.TIMER_COMPLETE, showImage);
@@ -582 +590 @@
                                         Logger.log('Could not smooth preview image: ' + e.message);
                                 }
+                                showImage();
                         }
                 }
@@ -590 +599 @@
                 }
 
-                protected function showImage(evt:TimerEvent):void {
-                        _imageLayer.visible = true;
-                        _mediaLayer.visible = false;
+                
+                protected function showImage(evt:TimerEvent=null):void {
+                        _imageLayer.alpha = 0;
+                        _imageFade.fade(1);
+                        _mediaFade.fade(0);
+                }
+                
+                protected function hideImage():void {
+                        _imageFade.fade(0);
                 }
 
                 protected function showMedia(evt:TimerEvent):void {
-                        _mediaLayer.visible = Boolean(_model.media.display);
-                        _imageLayer.visible = !Boolean(_model.media.display);
-                }
-                
-                protected function stateHandler(evt:PlayerStateEvent):void {
+                        if (_model.media.display) {
+                                _mediaFade.fade(1);
+                                _imageFade.fade(0);
+                        } else {
+                                _mediaFade.fade(0);
+                                _imageFade.fade(1);
+                        } 
+                }
+                
+                protected function stateHandler(evt:PlayerStateEvent=null):void {
                         imageDelay.reset();
                         mediaDelay.reset();
-                        switch (evt.newstate) {
+                        switch (_model.state) {
                                 case PlayerState.IDLE:
                                         imageDelay.start();