Mapbox GL JS supports video as a seamless, geographically-positioned layer in any map. By using theHTML5 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:
{type:'video',// this could also include fallback// versions of the video as WebM or other// formatsurls:['optimized.mp4'],// video is positioned by specifying// its four cornerscoordinates:[[-180,70],[180,70],[180,-70],[-180,-70]]}Video positioning is super flexible: you can specify any four corners as longitude, latitude pairs, and Mapbox GL JS will warp the video into place.
This is the simple raster layer we used to display the video:
{type:'raster',id:'storm-layer',source:'storm-source',paint:{'raster-opacity':0.4}}So far we don’t support video uploads in Mapbox Studio: you’ll need to add
your video source and layer to a style with the JavaScript API. TheaddSource andaddLayer methods
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.