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.
// 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.
// 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");