Question

我在地图框中添加了一个带视频源的图层。以下是剧本：

map.addSource("storm-source", {
type: "video",
urls: [
"C:/flood.mp4" // path to our video
],
coordinates: [
[ -79.1680785004, 34.7195831793 ],
[ -78.8680220490, 34.7195831793 ],
[ -78.8680220490, 34.4762734894 ],
[ -79.1680785004, 34.4762734894 ]
] // the coordinates to which your data is clipped:
});
// add this layer to the map
map.addLayer({
    "backgroung": 'transparent',
    "type": 'raster',
    "id": "storm-layer",
    "source": "storm-source",
    paint: {
      "raster-opacity": 1
    }
},
'hillshade_shadow_faint'); // "after" our lowest hillshade layer

现在，当视频flood.mp4的播放位置发生变化时，我希望以秒为单位显示视频的当前位置。 Mapbox的脚本是什么？我知道两个语句 - var mySource = map.getSource("storm-source");和mySource.getVideo().currentTime可以为特定时刻提供当前视频时间，但我想在视频运行时始终/连续显示当前时间。

Answer 1

您可以使用视频元素触发的timeupdate事件：

当currentTime属性指示的时间已更新时，将触发timeupdate事件。

参考：https://developer.mozilla.org/en-US/docs/Web/Events/timeupdate

示例：

var mySource = map.getSource("storm-source");

mySource.addEventListener('timeupdate', function (e) {
    console.log(e.target.currentTime);
});

此处有更多媒体事件：https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events

如何在Mapbox中获取当前视频时间？

1 个答案: