概述

Leaflet中的VideoOverlay是ImageOverlay的扩展类, 用于在地图指定地理范围内叠加HTML5视频(如MP4,WebM).

源码分析

源码实现

VideoOverlay的源码实现如下:

export var VideoOverlay = ImageOverlay.extend({
  options: {
    autoplay: true, // 视频加载后自动播放
    loop: true, //视频循环播放
    keepAspectRatio: true, // 保持视频宽高比,通过`object-fit:contain`实现
    muted: true, // 初始静音
    playsInline: true, // 在移动端内联播放(避免全屏)
  },
  _initImage: function () {
    // 1.创建或复用现有`<video>`元素
    var wasElementSupplied = this._url.tagName === "VIDEO";
    var vid = (this._image = wasElementSupplied
      ? this._url
      : document.createElement("video"));
    
    // 2.添加 CSS 类
    DomUtil.addClass(vid, "leaflet-image-layer");
    if (this._zoomAnimated) {
      DomUtil.addClass(vid, "leaflet-zoom-animated");
    }
    // 3.禁用默认行为
    if (this.options.className) {
      DomUtil.addClass(vid, this.options.className);
    }

    vid.onselectstart = Util.falseFn;
    vid.onmousemove = Util.falseFn;
    // 4.绑定加载完成事件
    vid.onloadeddata = Util.bind(this.fire, this, "load");
  
    // 5.处理直接传入<video>元素的情况
    if (wasElementSupplied) {
      var sourceElements = vid.getElementsByTagName("source");
      // 提取所有<source>中的URL
      var sources = [];
      for (var j = 0; j < sourceElements.length; j++) {
        sources.push(sourceElements[j].src);
      }

      this._url = sourceElements.length > 0 ? sources : [vid.src];
      return;
    }

    if (!Util.isArray(this._url)) {
      this._url = [this._url];
    }
    
    // 6.配置视频属性
    if (
      !this.options.keepAspectRatio &&
      Object.prototype.hasOwnProperty.call(vid.style, "objectFit")
    ) {
      vid.style["objectFit"] = "fill"; // 拉伸填充
    }
    vid.autoplay = !!this.options.autoplay;
    vid.loop = !!this.options.loop;
    vid.muted = !!this.options.muted;
    vid.playsInline = !!this.options.playsInline;

    // 7.添加多个视频源兼容不同格式
    for (var i = 0; i < this._url.length; i++) {
      var source = DomUtil.create("source");
      source.src = this._url[i];
      vid.appendChild(source);
    }
  },
});

export function videoOverlay(video, bounds, options) {
	return new VideoOverlay(video, bounds, options);
}

源码详解

1. 继承与核心差异

• 继承自ImageOverlay:复用地理范围控制,透明度,事件处理等基础功能
• 关键差异:
  • 使用<video>标签替代<img>或<svg>
  • 支持多视频源\播放控制\宽高比适配等视频特性

2. 核心方法

• 1. 重写_initImage
  • 多源支持:接受视频URL数组,生成多个<source>标签以提高浏览器兼容性
  • 直接复用<video>元素:允许开发者预创建并配置视频元素

关键特性与使用约束

1.地理范围与视频适配

• 自动调整尺寸:视频会根据地图缩放动态调整位置和大小

2.播放控制

• 直接操作DOM:通过getElement()获取<video>元素,调用 HTML5 Video API

3.事件监听

• 支持HTML5视频事件:如play,pause和ended等

浏览器兼容性注意事项

• 自动播放策略:多数现代浏览器要求muted:true才能自动播放
• 格式支持:提供多个视频源(如MP4+WebM)以确保跨浏览器兼容
• 移动端限制:playsInline:true避免ios默认全屏播放

总结

VideoOverlay是Leaflet中处理地理参考视频叠加的核心类,适用于监控摄像头\动态数据可视化等场景,其实现关键点包括:

• 复用ImageOverlay的地理映射逻辑,确保视频与地图同步
• 深度整合HTML5 Video API,提供完整的播放控制
• 多源与格式兼容,适应不同浏览器环境
• 性能优化,通过 CSS属性(如object-fit)平衡视觉效果与渲染效率