Mapbox GL JS supports video as a
seamless, geographically-positioned layer in any map. By using the
HTML5 Video specification for
video support, we can show MP4, WebM, and any other format supported by
browsers & operating systems.
Mapbox GL stylesheets are made up of sources that define data endpoints
and types, and layers that define how that data should be displayed. Video
layers start with the video source type.
For instance, here’s the video source we used for our map of Hurricane Patricia:
Video positioning is super flexible: you can specify any four corners
as longitude, latitude pairs, and Mapbox GL JS will warp the video into
This is the simple raster layer we used to display the video:
So far we don’t support video uploads in Mapbox Studio: you’ll need to add
allow you to do just that, and addLayer’s second argument - a layer id
that specifies where to place the new layer within the existing stack - lets
you put labels on top of a video layer.
This example using a video produced by NASA
shows how you can combine the power of the
HTML5 Video API and the Mapbox GL’s rendering: you can play & pause video,
change playback speed, and tweak rendering settings like saturation and contrast,
all in real-time.