修复视频地图视频图层渲染时机问题 review by luox

Author: xilanhuaweidapao

examples/mapboxgl/videoMap.html

@@ -207,7 +207,6 @@
               y: cameraLocation.cameraY,
               z: cameraLocation.cameraZ
             },
-            autoplay: false,
             styleOptions: {
               sprite: 'https://iclient.supermap.io/web/styles/street/sprite',
               glyphs:

src/mapboxgl/mapping/layers/VideoMapLayer.js

@@ -40,19 +40,10 @@ export default class VideoMapLayer extends mapboxgl.Evented {
         this.play();
       }
     });
-    this.video.one('ready', () => {
-      setTimeout(() => {
-        this.videoWidth = this.video.videoWidth();
-        this.videoHeight = this.video.videoHeight();
-        this._addVideoLayer(this.map);
-      }, 1000);
-    });
     this.video.one('canplay', () => {
-      setTimeout(() => {
-        if (this.autoplay) {
-          this.map.getSource(this.id).play();
-        }
-      }, 1500);
+      this.videoWidth = this.video.videoWidth();
+      this.videoHeight = this.video.videoHeight();
+      this._addVideoLayer(this.map);
     });
   }
 
@@ -99,6 +90,9 @@ export default class VideoMapLayer extends mapboxgl.Evented {
   }
 
   _afterAddVideoLayer() {
+    if (this.autoplay) {
+      this.map.getSource(this.id).play();
+    }
     this.fire('loaded', {
       originCoordsRightBottom: this.originCoordsRightBottom,
       originCoordsLeftTop: this.originCoordsLeftTop,

src/mapboxgl/overlay/VideoLayer.js

@@ -88,17 +88,10 @@
      this.video.one('firstplay', () => {
        this.video.play();
      });
-     this.video.one('ready', () => {
-       setTimeout(() => {
-         this.videoWidth = this.video.videoWidth();
-         this.videoHeight = this.video.videoHeight();
-         this._addVideoLayer(this.map);
-       }, 1000);
-     });
      this.video.one('canplay', () => {
-       setTimeout(() => {
-         map.getSource(this.layerId).play();
-       }, 1500);
+        this.videoWidth = this.video.videoWidth();
+        this.videoHeight = this.video.videoHeight();
+        this._addVideoLayer(this.map);
      });
    }
 
@@ -264,6 +257,7 @@
            source: this.layerId
          }
        );
+       map.getSource(this.layerId).play();
      });
    }
 

test/karma.conf.js

@@ -70,7 +70,7 @@ module.exports = function (config) {
       { pattern: '../src/classic/libs/Lang/*.js', included: true },
       { pattern: '../src/classic/theme/default/*.css', included: true },
       { pattern: './resources/data/**.fgb', included: false },
-      { pattern: './resources/data/**.m3u8', included: false },
+      { pattern: './resources/data/**.mp4', included: false },
       { pattern: './resources/img/**.svg', included: false },
       { pattern: './resources/img/baiduTileTest.png', included: false },
       /**测试文件**/

test/mapboxgl/mapping/VideoMapSpec.js

@@ -1,7 +1,7 @@
 import { VideoMap } from '../../../src/mapboxgl/mapping/VideoMap';
 import mapboxgl from 'mapbox-gl';
 import mbglmap from '../../tool/mock_mapboxgl_map';
-var videoUrl = 'base/resources/data/index.m3u8';
+var videoUrl = 'base/resources/data/test.mp4';
 describe('mapboxgl_videoMap', () => {
   var originalTimeout;
   var testDiv;

test/mapboxgl/overlay/VideoLayerSpec.js

@@ -2,7 +2,7 @@ import { VideoLayer } from '../../../src/mapboxgl/overlay/VideoLayer';
 import mapboxgl from 'mapbox-gl';
 import mbglmap from '../../tool/mock_mapboxgl_map';
 var url = GlobeParameter.ChinaURL + '/zxyTileImage.png?z={z}&x={x}&y={y}';
-var videoUrl = 'base/resources/data/index.m3u8';
+var videoUrl = 'base/resources/data/test.mp4';
 describe('mapboxgl_VideoLayer', () => {
   var originalTimeout;
   var testDiv, map;