更新 infowindow-view.js

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('<p class="CDB-infowindow-fail">Non-valid Video URL</p>');
+    this.$('.js-cover').append('<p class="CDB-infowindow-fail">无效的视频网址</p>');
+  },
+  
+  _loadVideoFromUrl: function (url) {
+    var $cover = this.$('.js-cover');
+
+    this._startCoverLoader();
+
+    var $img = $("<video class='CDB-infowindow-media-item' />");
+    $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 () {