经纬志
首页 / MapLibre / 使用示例

视频源

视频按四角坐标铺成图层,暂停、播放、查询时长都由 source 对象控制。 浏览器拦截自动播放时,第一帧仍会显示,点一下播放即可。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

源加载后会创建内部 video 元素并尝试播放。 带声音的视频通常会被浏览器拒绝,此时画面停在首帧, getVideo().paused 为 true,点击播放按钮后恢复。

示例把 raster-fade-duration 设为 0,避免每次播放、暂停、改坐标时 出现一次淡入闪烁。这个参数对视频图层的观感影响比透明度更大。

配置取值说明
urlsmp4 数组按顺序尝试,可补 webm 兜底
coordinates四角坐标视频的贴图范围
raster-fade-duration0关闭淡入,切换更干脆
raster-opacity0.95略透出底图,便于对位
getVideo()video 元素读时长、音量与播放状态

视频分辨率与覆盖面积的比值决定清晰度。640×360 的视频铺满一个省域, 放大后必然模糊,换成更高分辨率的素材才有意义。

视频地址必须带跨域头,否则纹理无法上传,画面全黑。 同时给 mp4 与 webm 两种格式,能覆盖更多浏览器。