import "@arcgis/map-components/components/arcgis-video-player";The Video Player component provides a user interface for interacting with a VideoLayer. It displays the original video content and provides controls for playing, pausing, seeking, and changing the video speed and quality.
The Video Player component provides the following capabilities:
- Control operations (play, pause, seek)
- Time and duration display
- Customizable graphics colors
- Following options (sensor, frame, video)
- Adjustable speed and quality
- Access to frame metadata
The VideoPlayerViewModel class provides the logic for the Video Player.
Known limitations
- Not supported in 3D Scenes.
- Not supported on macOS and iOS devices.
Example
<arcgis-map>
<arcgis-video-player slot="top-right"></arcgis-video-player>
</arcgis-map>
<script type="module">
const [Map, VideoLayer] = await $arcgis.import([
"@arcgis/core/Map.js",
"@arcgis/core/layers/VideoLayer.js",
]);
const viewElement = document.querySelector("arcgis-map");
const videoPlayerElement = document.querySelector("arcgis-video-player");
const videoLayer = new VideoLayer({
url: "YOUR_VIDEO_LAYER_URL",
});
viewElement.map = new Map({
basemap: "topo-vector",
layers: [videoLayer],
});
await viewElement.viewOnReady();
await videoLayer.load();
if (videoLayer.loaded) {
videoPlayerElement.layer = videoLayer;
}
await viewElement.whenLayerView(videoLayer);
viewElement.goTo(videoLayer.fullExtent);
</script>Properties
| Property | Attribute | Type |
|---|---|---|
autoDestroyDisabled | auto-destroy-disabled | boolean |
followingMode | following-mode | "follow-both" | "follow-frame" | "follow-sensor" | "none" |
hideHeader | hide-header | boolean |
icon | icon | string |
labelreflected | label | string |
layer | | VideoLayer |
messageOverrides | | Record<string, unknown> |
positiondeprecatedreflected | position | "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing" |
referenceElement | reference-element | HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string |
statereadonlyreflected | state | "can-play" | "data-loaded" | "error" | "not-ready" | "paused" | "playing" | "ready" | "waiting" |
view | | MapView |
autoDestroyDisabled
autoDestroyDisabled: booleanIf 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
followingMode
followingMode: "follow-both" | "follow-frame" | "follow-sensor" | "none"Determines which telemetry elements to follow when the video layer is playing.
- Attribute
- following-mode
- Default value
- "follow-both"
hideHeader
hideHeader: booleanIndicates whether to display the video player's header information.
- Attribute
- hide-header
- Default value
- false
icon
icon: stringIcon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).
- See also
- Attribute
- icon
- Default value
- "video-web"
layer
layer: VideoLayerThe VideoLayer to use as the data source for the video player.
Example
// Create a new Video Player with a VideoLayer
videoPlayer.layer = videoLayer;- Default value
- null
messageOverrides
messageOverrides: Record<string, unknown>Replace localized message strings with your own strings.
Note: Individual message keys may change between releases.
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"slot instead.- Attribute
- position
referenceElement
referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | stringBy assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
- Attribute
- reference-element
state
state: "can-play" | "data-loaded" | "error" | "not-ready" | "paused" | "playing" | "ready" | "waiting"The current state of the component.
- Attribute
- state
view
view: MapViewThe view associated with the component.
Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this
viewproperty which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Video Player component will be associated with a map or scene component rather than using theviewproperty.
- Default value
- null
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 arcgisVideoPlayer = document.querySelector("arcgis-video-player");
document.body.append(arcgisVideoPlayer);
await arcgisVideoPlayer.componentOnReady();
console.log("arcgis-video-player is ready to go!");- Returns
- Promise<void>
Events
| Event | Type |
|---|---|
arcgisPropertyChange | CustomEvent<{ name: "state" | "layer"; }> |
arcgisReady | CustomEvent<void> |
arcgisVideoReady | CustomEvent<void> |
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "state" | "layer"; }>Emitted when the value of a property is changed. Use this to listen to changes to properties.
arcgisReady
arcgisReady: CustomEvent<void>Emitted when the component associated with a map or scene view is ready to be interacted with.