VideoLayer and VideoPlayer widget

Explore in the sandbox

This sample demonstrates how to add a VideoLayer to a Map and display it in a MapView. The VideoPlayer widget allows you to control the playback of the video.

Create a new VideoLayer and add it to the map, then add the map to the map view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
        // Create a new VideoLayer using the url to your video service
        const videoLayer = new VideoLayer({
          url: "url-to-your-video-service"
        });

        // Create a new map adding the videoLayer to the layers collection
        const map = new Map({
          basemap: "topo-vector",
          layers: [videoLayer]
        });

        // Create a new MapView using the map and setting its container to be a div with the id of "viewDiv"
        const view = new MapView({
          container: "viewDiv",
          map
        });

Add a new VideoPlayer widget to the view to control the video playback.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
        // Create a new VideoPlayer using the videoLayer and the view
        const videoPlayer = new VideoPlayer({
          layer: videoLayer,
          view
        });

        // Add the video player to the bottom left of the view
        view.ui.add(videoPlayer, "bottom-left");

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close