首页 / MapLibre / 使用示例
视频源
视频按四角坐标铺成图层,暂停、播放、查询时长都由 source 对象控制。 浏览器拦截自动播放时,第一帧仍会显示,点一下播放即可。
源码与运行效果
说明
源加载后会创建内部 video 元素并尝试播放。
带声音的视频通常会被浏览器拒绝,此时画面停在首帧,
getVideo().paused 为 true,点击播放按钮后恢复。
示例把 raster-fade-duration 设为 0,避免每次播放、暂停、改坐标时
出现一次淡入闪烁。这个参数对视频图层的观感影响比透明度更大。
| 配置 | 取值 | 说明 |
|---|---|---|
urls | mp4 数组 | 按顺序尝试,可补 webm 兜底 |
coordinates | 四角坐标 | 视频的贴图范围 |
raster-fade-duration | 0 | 关闭淡入,切换更干脆 |
raster-opacity | 0.95 | 略透出底图,便于对位 |
getVideo() | video 元素 | 读时长、音量与播放状态 |
视频分辨率与覆盖面积的比值决定清晰度。640×360 的视频铺满一个省域, 放大后必然模糊,换成更高分辨率的素材才有意义。
视频地址必须带跨域头,否则纹理无法上传,画面全黑。 同时给 mp4 与 webm 两种格式,能覆盖更多浏览器。