Add a video | Mapbox GL JS

This example adds a georeferenced video on top of a map layer with satellite imagery.

It adds a raster source for the satellite imagery and a video source for the video, then adds raster layers for each of those sources.

Then it adds user interactivity by using the click event to enable pause and play video controls.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a video</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = '<your access token here>';
var videoStyle = {
'version': 8,
'sources': {
'satellite': {
'type': 'raster',
'url': 'mapbox://mapbox.satellite',
'tileSize': 256
},
'video': {
'type': 'video',
'urls': [
'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4',
'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'
],
'coordinates': [
[-122.51596391201019, 37.56238816766053],
[-122.51467645168304, 37.56410183312965],
[-122.51309394836426, 37.563391708549425],
[-122.51423120498657, 37.56161849366671]
]
}
},
'layers': [
{
'id': 'background',
'type': 'background',
'paint': {
'background-color': 'rgb(4,7,14)'
}
},
{
'id': 'satellite',
'type': 'raster',
'source': 'satellite'
},
{
'id': 'video',
'type': 'raster',
'source': 'video'
}
]
};
 
var map = new mapboxgl.Map({
container: 'map',
minZoom: 14,
zoom: 17,
center: [-122.514426, 37.562984],
bearing: -96,
style: videoStyle
});
 
var playingVideo = true;
 
map.on('click', function () {
playingVideo = !playingVideo;
 
if (playingVideo) map.getSource('video').play();
else map.getSource('video').pause();
});
</script>
 
</body>
</html>