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:

{
  type: 'video',
  // this could also include fallback
  // versions of the video as WebM or other
  // formats
  urls: ['optimized.mp4'],
  // video is positioned by specifying
  // its four corners
  coordinates: [
    [ -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. The addSource and addLayer 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.