diff --git a/src/geo/ui/infowindow-view.js b/src/geo/ui/infowindow-view.js index 9ded391..1022e71 100644 --- a/src/geo/ui/infowindow-view.js +++ b/src/geo/ui/infowindow-view.js @@ -152,7 +152,7 @@ var Infowindow = View.extend({ if (this._containsTemplateCover()) { this._loadCoverFromTemplate(url); } else { - this._loadCoverFromUrl(url); + this._loadVideoFromUrl(url); } }, @@ -167,8 +167,47 @@ var Infowindow = View.extend({ _showInfowindowVideoError: function () { this.$('.js-infowindow').addClass('is-fail'); - this.$('.js-cover').append('
Non-valid Video URL
'); + this.$('.js-cover').append('无效的视频网址
'); }, + + _loadVideoFromUrl: function (url) { + var $cover = this.$('.js-cover'); + + this._startCoverLoader(); + + var $img = $(""); + $cover.append($img); + + $img + .load(this._onLoadVideoSuccess) + .error(this._onLoadImageError) + .attr('src', url); + }, + + _onLoadVideoSuccess: function () { + var $cover = this.$('.js-cover'); + var $img = this.$('.CDB-infowindow-media-item'); + var url = $img.attr('src'); + var numFields = this.model.get('content').fields.length; + + var imageDimensions = { width: $img.width(), height: $img.height() }; + var coverDimensions = { width: $cover.width(), height: $cover.height() }; + + var styles = this._calcImageStyle(imageDimensions, coverDimensions); + + $img.css(styles); + + $cover.css({ height: imageDimensions.height - this.options.hookHeight }); + + this._stopCoverLoader(); + + $img.fadeIn(150); + + if (numFields < 3 && imageDimensions.height >= this.$el.height()) { + this._loadImageHook(imageDimensions, coverDimensions, url); + } + }, + // end video _initBinds: function () {