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.

JavaScript

React

JavaScript

React


<!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">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<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_MAPBOX_ACCESS_TOKEN';
    const 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'
            }
        ]
    };

    const map = new mapboxgl.Map({
        container: 'map',
        minZoom: 14,
        zoom: 17,
        center: [-122.514426, 37.562984],
        bearing: -96,
        style: videoStyle
    });

    let playingVideo = true;

    map.on('click', () => {
        playingVideo = !playingVideo;

        if (playingVideo) {
            map.getSource('video').play();
        } else {
            map.getSource('video').pause();
        }
    });
</script>

</body>
</html>

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

JavaScript

React


import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  useEffect(() => {
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    const 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'
        }
      ]
    };

    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current,
      minZoom: 14,
      zoom: 17,
      center: [-122.514426, 37.562984],
      bearing: -96,
      style: videoStyle
    });

    let playingVideo = true;

    mapRef.current.on('click', () => {
      playingVideo = !playingVideo;

      if (playingVideo) {
        mapRef.current.getSource('video').play();
      } else {
        mapRef.current.getSource('video').pause();
      }
    });

    return () => mapRef.current.remove();
  }, []);

  return <div id="map" style={{ height: '100%' }} ref={mapContainerRef}></div>;
};

export default MapboxExample;

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

追加の開発者リソース

このexampleは役に立ちましたか？