arcgis-video | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/map-components/components/arcgis-video";

Inheritance:: ArcgisVideo→PublicLitElement

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
`aria`		`VideoView["aria"]`
`attributionMode`	`attribution-mode`	`"dark" \| "light" \| null \| undefined`
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`layer`		`VideoLayer \| null \| undefined`
`map`		`Map \| WebMap \| null \| undefined`
`ready` readonly		`boolean`
`view` readonly		`VideoView`

aria

Property

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

Property

Type: "dark" | "light" | null | undefined

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

Property

Type: boolean

Attribute: auto-destroy-disabled
Default value: false

layer

Property

Type: VideoLayer | null | undefined

The VideoLayer to display in the view.

map

Property

Type: Map | WebMap | null | undefined

A reference to the associated Map or WebMap.

ready

readonly Property

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

when()

Default value: false

view

readonly Property

Type: VideoView

The VideoView instance created and manged by the component. Accessible once the component is fully loaded.

Methods

Method	Signature
`componentOnReady` inherited	`componentOnReady(): Promise<this>`
`destroy`	`destroy(): Promise<void>`

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Inherited from: PublicLitElement

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisVideo = document.querySelector("arcgis-video");
document.body.append(arcgisVideo);
await arcgisVideo.componentOnReady();
console.log("arcgis-video is ready to go!");

destroy

Method

Signature: destroy (): Promise<void>

Destroys the view, and any associated resources, including its map, popup, and UI elements.

Returns: Promise<void>

Events

Name	Type
`arcgisViewReadyChange`	CustomEvent<void>

arcgisViewReadyChange

Event

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).

Styles

Name	Default	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.
`--arcgis-view-color-focus`		Since 5.0 Specifies the focus outline color for the view.