首页 / Leaflet / 使用示例
视频叠加
把视频画面钉在地图范围上播放，可调透明度、暂停，并在老浏览器上自动降级。
源码与运行效果
说明
示例没有外链视频文件，直接用 canvas.captureStream(25) 合成一路实时流，
把 HTMLVideoElement 交给 L.videoOverlay。
这既避免了跨域与编码格式问题，也演示了「视频节点可以直接传入」这条路径。
真实项目里把 video.srcObject 换成 video.src = '/media/flow.mp4' 即可。
覆盖范围经度 0.32°、纬度 0.16°，与 640×320 的画布保持 2:1，视频不会被拉伸变形。
透明度通过 setOpacity 实时修改，暂停时同时停掉绘制循环，避免后台空转。
| 环节 | 本例做法 | 换成自有视频时 |
|---|---|---|
| 片源 | canvas 流，无外部文件 | mp4 + webm 双格式数组，兼容旧版 Safari |
| 自动播放 | muted + playsinline | 保持静音；需要声音时改为用户点击后播放 |
| 比例 | bounds 与画布比例一致 | 按视频宽高比换算经纬跨度，避免人物或车辆变形 |
| 控制 | getElement() 调 play / pause | 可接自定义控件做进度条与倍速 |
| 降级 | 不支持 captureStream 时改建 imageOverlay | 视频解码失败时监听 error 换成静态快照 |
视频叠加层在移动端会持续解码，电量和发热明显高于静态图。监控类页面通常只在
用户点开时才挂载视频，关闭时调用 remove() 并把 video.src
置空，让解码器释放。