import "@arcgis/map-components/components/arcgis-video";The ArcGIS Video component provides a view for displaying video feeds from a VideoLayer. It is designed to render and interact with video layers.
A Video component must have a valid VideoLayer. It supports various features such as navigating, zooming, and panning, making it suitable for applications that require interactive video overlays.
Example
<arcgis-video></arcgis-video>
<script type="module">
const VideoLayer = await $arcgis.import("@arcgis/core/layers/VideoLayer.js");
const videoElement = document.querySelector("arcgis-video");
const videoLayer = new VideoLayer({
autoplay: true,
url: "YOUR_VIDEO_LAYER_URL",
});
await videoLayer.load();
if (videoLayer.loaded) {
videoElement.layer = videoLayer;
}
</script>Properties
| Property | Attribute | Type |
|---|---|---|
aria | | DOMContainerAria |
autoDestroyDisabled | auto-destroy-disabled | boolean |
layer | | VideoLayer |
map | | Map | WebMap |
readyreadonly | | boolean |
viewreadonly | | VideoView |
aria
aria: DOMContainerAriaThe ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: label, description, describedByElements, and labelledByElements.
autoDestroyDisabled
autoDestroyDisabled: boolean- Attribute
- auto-destroy-disabled
- Default value
- false
ready
ready: booleanWhen true, this property indicates whether the view successfully satisfied all dependencies,
signaling that the following conditions are met.
- Default value
- false
view
view: VideoViewThe VideoView instance created and manged by the component. Accessible once the component is fully loaded.
Methods
| Method | Signature |
|---|---|
componentOnReady | componentOnReady(): Promise<void> |
destroy | destroy(): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>Create a promise that resolves once component is fully loaded.
Example
const arcgisVideo = document.querySelector("arcgis-video");
document.body.append(arcgisVideo);
await arcgisVideo.componentOnReady();
console.log("arcgis-video is ready to go!");- Returns
- Promise<void>
destroy
destroy(): Promise<void>Destroys the view, and any associated resources, including its map, popup, and UI elements.
- Returns
- Promise<void>
Events
| Event | Type |
|---|---|
arcgisViewReadyChange | CustomEvent<void> |
Slots
| Name | Description |
|---|---|
default(unnamed) | Default slot for adding components to the video. User is responsible for positioning the content via CSS. |
top-left | Slot for components positioned in the top-left corner. |
top-right | Slot for components positioned in the top-right corner. |
bottom-left | Slot for components positioned in the bottom-left corner. |
bottom-right | Slot for components positioned in the bottom-right corner. |
top-start | Slot for components positioned at the top-start (top-left in LTR, top-right in RTL). |
top-end | Slot for components positioned at the top-end (top-right in LTR, top-left in RTL). |
bottom-start | Slot for components positioned at the bottom-start (bottom-left in LTR, bottom-right in RTL). |
bottom-end | Slot for components positioned at the bottom-end (bottom-right in LTR, bottom-left in RTL). |
default (unnamed)
Default slot for adding components to the video. User is responsible for positioning the content via CSS.
bottom-start
Slot for components positioned at the bottom-start (bottom-left in LTR, bottom-right in RTL).
bottom-end
Slot for components positioned at the bottom-end (bottom-right in LTR, bottom-left in RTL).
Styles
| Name | Description |
|---|---|
--arcgis-layout-overlay-space-top | Since 4.34 Specifies the top padding for the layout. |
--arcgis-layout-overlay-space-bottom | Since 4.34 Specifies the bottom padding for the layout. |
--arcgis-layout-overlay-space-left | Since 4.34 Specifies the left padding for the layout. |
--arcgis-layout-overlay-space-right | Since 4.34 Specifies the right padding for the layout. |