import "@arcgis/map-components/components/arcgis-video";- Inheritance
- ArcgisVideo→
HTMLElement
- Since
- ArcGIS Maps SDK for JavaScript 4.33
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 |
|---|---|---|
| | VideoView["aria"] | |
| attribution-mode | ||
| auto-destroy-disabled | ||
| | VideoLayer | null | undefined | |
| | ||
| operational-data-visible | ||
| readonly | | |
| readonly | |
aria
- Type
- VideoView["aria"]
- Since
- ArcGIS Maps SDK for JavaScript 4.34
The 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.
attributionMode
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The light or dark mode used to display the attribution. By default, the mode is inherited from the Calcite's mode. You can override the value to style the attribution alongside the map or scene content.
- Attribute
- attribution-mode
autoDestroyDisabled
- Type
- boolean
If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy() method when you are done to prevent memory leaks.
- Attribute
- auto-destroy-disabled
- Default value
- false
operationalDataVisible
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 5.1
Indicates whether map graphics from the reference map element are overlaid on the video player's content.
- Attribute
- operational-data-visible
- Default value
- false
ready
- Type
- boolean
When true, this property indicates whether the view successfully satisfied all dependencies,
signaling that the following conditions are met.
When a view becomes ready it will resolve itself and invoke
the callback defined in when() where code can execute on a working view. Subsequent
changes to a view's readiness would typically be handled by watching view.ready and providing
logic for cases where the layer or container change.
- See also
- Default value
- false
Methods
| Method | Signature |
|---|---|
| inherited | componentOnReady(): Promise<this> |
| destroy(): Promise<void> |
componentOnReady
- Signature
-
componentOnReady (): Promise<this>
Creates a promise that resolves once the component is fully loaded.
- Returns
- Promise<this>
- Example
- const arcgisVideo = document.createElement("arcgis-video");document.body.append(arcgisVideo);await arcgisVideo.componentOnReady();console.log("arcgis-video is ready to go!");
Events
| Name | Type |
|---|---|
Slots
| Name | Description |
|---|---|
| Default slot for adding components to the video. User is responsible for positioning the content via CSS. | |
| Slot for components positioned in the top-left corner. | |
| Slot for components positioned in the top-right corner. | |
| Slot for components positioned in the bottom-left corner. | |
| Slot for components positioned in the bottom-right corner. | |
| Slot for components positioned at the top-start (top-left in LTR, top-right in RTL). | |
| Slot for components positioned at the top-end (top-right in LTR, top-left in RTL). | |
| Slot for components positioned at the bottom-start (bottom-left in LTR, bottom-right in RTL). | |
| 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 | Default | Description |
|---|---|---|
| | Since 4.34 Specifies the top padding for the layout. | |
| | Since 4.34 Specifies the bottom padding for the layout. | |
| | Since 4.34 Specifies the left padding for the layout. | |
| | Since 4.34 Specifies the right padding for the layout. | |
| | Since 5.0 Specifies the focus outline color for the view. | |
| | Since 5.1 Specifies the background color for table rows. | |
| | Since 5.1 Specifies the background color for alternate table rows. |