import VideoView from "@arcgis/core/views/VideoView.js";const VideoView = await $arcgis.import("@arcgis/core/views/VideoView.js");- Inheritance:
- VideoView→
Accessor
- Since
- ArcGIS Maps SDK for JavaScript 4.33
The VideoView class provides a view for displaying video feeds from a VideoLayer. It is designed to render and interact with video layers.
A VideoView must be instantiated with a valid layer and container. It supports various features such as navigating, zooming, and panning, making it suitable for applications that require interactive video overlays.
Notes
VideoView is responsible for rendering the video feed from a VideoLayer. To easily interact with the VideoView in your application, and add additional UI elements like zoom controls, use the Video Component.
- See also
Example
const videoView = new VideoView({ container: "videoViewDiv", layer: videoLayer});Constructors
Constructor
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| properties | | |
Properties
| Property | Type | Class |
|---|---|---|
aria inherited | ||
attributionHeight readonly inherited | ||
attributionMode inherited | ||
container inherited | ||
declaredClass readonly inherited | ||
focused readonly inherited | ||
height readonly inherited | ||
VideoLayer | null | undefined | | |
| | ||
| | ||
ready readonly | | |
resizing readonly inherited | ||
| | ||
size readonly inherited | ||
suspended readonly inherited | ||
ui inherited | ||
videoSize readonly | | |
width readonly inherited |
aria
- Type
- DOMContainerAria
- Since
- ArcGIS Maps SDK for JavaScript 4.34
The ARIA attributes for the view container.
attributionHeight
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The height of the attribution in pixels. The value is practical to adjust the bottom padding of other UI elements. The value changes when the attribution is expanded or collapsed.
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.
container
- Type
- HTMLDivElement | null | undefined
The id or node representing the DOM element containing the view. This is typically set in the view's constructor.
Examples
// Sets container to the DOM idlet view = new MapView({ container: "viewDiv" // ID of the HTML element that holds the view});// Sets container to the nodelet viewNode = document.getElementById("viewDiv");let view = new SceneView({ container: viewNode}); focused
- Type
- boolean
Indicates if the browser focus is on the view.
height
- Type
- number
The height of the view in pixels read from the view container element.
The view container needs to have a height greater than 0 to be displayed.
- Default value
- 0
navigation
- Type
- Navigation
Options to configure the navigation behavior of the View.
Example
// Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming.const view = new VideoView({ container: "videoViewDiv", layer: videoLayer, navigation: { gamepad: { enabled: false }, actionMap: { dragSecondary: "none", // Disable rotating the view with the right mouse button mouseWheel: "none" // Disable zooming with the mouse wheel }, browserTouchPanEnabled: false, momentumEnabled: 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
resizing
- Type
- boolean
Indicates whether the view is being resized.
- Default value
- false
scale
- Type
- number
Scale is the ratio between the size of the video in pixels and the size of the view in pixels.
A scale value of 1 displays the video at its native resolution, meaning one pixel corresponds
to one pixel in the view. If the scale value is less than 1, the video will appear enlarged.
For example, when the scale is 0.5, the video would be displayed at twice its native size.
- Default value
- 0
Example
videoView.scale = 0.5; size
An array containing the width and height of the view in pixels, e.g. [width, height].
suspended
- Type
- boolean
Indicates if the view is visible on the page. When true, the view is not visible and it stops rendering and updating data.
Set to true when one of the following conditions are met:
- if the view does not have a container,
- if the view's height or width equal to 0,
- if the view container's css style
displayis set tonone(display:none).
When the view container's css style visibility is set to hidden, this property is set to false, and
the view is hidden but it stills renders and updates data.
- Default value
- true
ui
- Type
- DefaultUI
Exposes the default widgets available in the view and allows you to toggle them on and off. See DefaultUI for more details.
Examples
let toggle = new BasemapToggle({ view: view, nextBasemap: "hybrid"});// Adds an instance of BasemapToggle widget to the// top right of the view.view.ui.add(toggle, "top-right");// Moves the zoom and BasemapToggle widgets to the// bottom left of the view.view.ui.move([ "zoom", toggle ], "bottom-left");// Removes all the widgets from the bottom left of the viewview.ui.empty("bottom-left");// Removes the compass widget from the viewview.ui.remove("compass");// Removes all default UI components, except Attribution.// Passing an empty array will remove all components.view.ui.components = [ "attribution" ]; width
- Type
- number
The width of the view in pixels read from the view container element.
The view container needs to have a width greater than 0 to be displayed.
- Default value
- 0
Methods
| Method | Signature | Class |
|---|---|---|
emit inherited | emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean | |
focus inherited | focus(): void | |
hasEventListener inherited | hasEventListener<Type extends EventNames<this>>(type: Type): boolean | |
isFulfilled inherited | isFulfilled(): boolean | |
isRejected inherited | isRejected(): boolean | |
isResolved inherited | isResolved(): boolean | |
on inherited | on<Type extends EventNames<this>>(type: Type, listener: (event: this["@eventTypes"][Type]) => void): ResourceHandle | |
on inherited | on<Type extends EventNames<this>>(type: Type, modifiers: string[], listener: (event: this["@eventTypes"][Type]) => void): ResourceHandle | |
when inherited | when<TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> | null | undefined, onRejected?: OnRejectedCallback<TResult2> | null | undefined): Promise<TResult1 | TResult2> |
emit
- Signature
-
emit <Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean
- Type parameters
- <Type extends EventNames<this>>
Emits an event on the instance. This method should only be used when creating subclasses of this class.
focus
- Signature
-
focus (): void
Sets the focus on the view.
- Returns
- void
hasEventListener
- Signature
-
hasEventListener <Type extends EventNames<this>>(type: Type): boolean
- Type parameters
- <Type extends EventNames<this>>
Indicates whether there is an event listener on the instance that matches the provided event name.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| type | Type | The name of the event. | |
- Returns
- boolean
Returns true if the class supports the input event.
isFulfilled
- Signature
-
isFulfilled (): boolean
isFulfilled() may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected).
If it is fulfilled, true will be returned.
- Returns
- boolean
Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).
isRejected
- Signature
-
isRejected (): boolean
isRejected() may be used to verify if creating an instance of the class is rejected.
If it is rejected, true will be returned.
- Returns
- boolean
Indicates whether creating an instance of the class has been rejected.
isResolved
- Signature
-
isResolved (): boolean
isResolved() may be used to verify if creating an instance of the class is resolved.
If it is resolved, true will be returned.
- Returns
- boolean
Indicates whether creating an instance of the class has been resolved.
on
- Signature
-
on <Type extends EventNames<this>>(type: Type, listener: (event: this["@eventTypes"][Type]) => void): ResourceHandle
- Type parameters
- <Type extends EventNames<this>>
- Since
- ArcGIS Maps SDK for JavaScript 5.0
Registers an event handler on the instance. Call this method to hook an event with a listener. See the Events summary table for a list of listened events.
Parameters
- Returns
- ResourceHandle
Returns an event handler with a
remove()method that can be called to stop listening for the event.Property Type Description remove Function When called, removes the listener from the event.
Example
view.on("click", function(event){ // event is the event handle returned after the event fires. console.log(event.mapPoint);});
// Fires `pointer-move` event when user clicks on "Shift"// key and moves the pointer on the view.view.on("pointer-move", ["Shift"], function(event){ let point = view2d.toMap({x: event.x, y: event.y}); bufferPoint(point);}); on
- Signature
-
on <Type extends EventNames<this>>(type: Type, modifiers: string[], listener: (event: this["@eventTypes"][Type]) => void): ResourceHandle
- Type parameters
- <Type extends EventNames<this>>
- Since
- ArcGIS Maps SDK for JavaScript 5.0
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| type | Type | The name of the event or events to listen for. | |
| modifiers | string[] | Additional modifier keys to filter events. Please see Key Values for possible values. All the standard key values are supported. Alternatively, if no modifiers are required, the function will call when the event fires. The following events don't support modifier keys: | |
| listener | The function to call when the event is fired, if modifiers were specified. | |
- Returns
- ResourceHandle
Returns an event handler with a
remove()method that can be called to stop listening for the event.Property Type Description remove Function When called, removes the listener from the event.
when
- Signature
-
when <TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> | null | undefined, onRejected?: OnRejectedCallback<TResult2> | null | undefined): Promise<TResult1 | TResult2>
when() may be leveraged once an instance of the class is created. This method takes two input parameters: an onFulfilled function and an onRejected function.
The onFulfilled executes when the instance of the class loads. The
onRejected executes if the instance of the class fails to load.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| onFulfilled | OnFulfilledCallback<this, TResult1> | null | undefined | The function to call when the promise resolves. | |
| onRejected | The function to execute when the promise fails. | |
- Returns
- Promise<TResult1 | TResult2>
Returns a new promise for the result of
onFulfilledthat may be used to chain additional functions.
Example
// Although this example uses MapView, any class instance that is a promise may use when() in the same waylet view = new MapView();view.when(function(){ // This function will execute once the promise is resolved}, function(error){ // This function will execute if the promise is rejected due to an error});Events
| Name | Type |
|---|---|
analysis-view-create inherited | |
analysis-view-create-error inherited | |
analysis-view-destroy inherited | |
blur inherited | |
click inherited | |
double-click inherited | |
double-tap-drag inherited | |
drag inherited | |
focus inherited | |
hold inherited | |
immediate-click inherited | |
immediate-double-click inherited | |
key-down inherited | |
key-up inherited | |
layerview-create inherited | |
layerview-create-error inherited | |
layerview-destroy inherited | |
mouse-wheel inherited | |
pointer-down inherited | |
pointer-enter inherited | |
pointer-leave inherited | |
pointer-move inherited | |
pointer-up inherited | |
resize inherited | |
vertical-two-finger-drag inherited |
analysis-view-create
analysis-view-create: CustomEvent<AnalysisViewCreateEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires when the view for an Analysis is created.
analysis-view-create-error
analysis-view-create-error: CustomEvent<AnalysisViewCreateErrorEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires when an error occurs during the creation of an Analysis after an analysis is added to the view.
analysis-view-destroy
analysis-view-destroy: CustomEvent<AnalysisViewDestroyEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after an analysis view is destroyed.
blur
blur: CustomEvent<ViewBlurEvent> Fires when browser focus is moved away from the view.
click
click: CustomEvent<ClickEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after a user clicks on the view. This event emits slightly slower than an View.@immediate-click event to make sure that a View.@double-click event isn't triggered instead. The View.@immediate-click event can be used for responding to a click event without delay.
Examples
view.on("click", function(event){ // event is the event object returned after the event fires
// Prints the map coordinates of the clicked location console.log(event.mapPoint);});// Set up a click event handler and retrieve the screen pointview.on("click", function(event) { // the hitTest() checks to see if any graphics in the view // intersect the given screen x, y coordinates view.hitTest(event) .then(getGraphics);});view.on("click", function(event) { // you must overwrite default click-for-popup // behavior to display your own popup view.popupEnabled = false;
// Get the coordinates of the click on the view let lat = Math.round(event.mapPoint.latitude * 1000) / 1000; let lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
view.popup.open({ // Set the popup's title to the coordinates of the location title: "Reverse geocode: [" + lon + ", " + lat + "]", location: event.mapPoint // Set the location of the popup to the clicked location content: "This is a point of interest" // content displayed in the popup });}); double-click
double-click: CustomEvent<DoubleClickEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after double-clicking on the view.
Example
view.on("double-click", function(event) { // The event object contains the mapPoint and the screen coordinates of the location // that was clicked. console.log("screen point", event.x, event.y); console.log("map point", event.mapPoint);}); double-tap-drag
double-tap-drag: CustomEvent<DoubleTapDragEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires while the pointer is drag following a double-tap gesture on the view.
Example
view.on("double-tap-drag", (event) => { // Display the distance moved from the drag origin. console.log("x distance:", event.x, "y distance:", event.y);}); drag
drag: CustomEvent<DragEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires during a pointer drag on the view.
Example
view.on("drag", function(event){ // Print out the current state of the // drag event. console.log("drag state", event.action);}); focus
focus: CustomEvent<ViewFocusEvent> Fires when browser focus is on the view.
hold
hold: CustomEvent<HoldEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after holding either a mouse button or a single finger on the view for a short amount of time.
Example
view.on("hold", function(event) { // The event object contains the mapPoint and the screen coordinates of the location // that was clicked. console.log("hold at screen point", event.x, event.y); console.log("hold at map point", event.mapPoint);}); immediate-click
immediate-click: CustomEvent<ImmediateClickEvent> Fires right after a user clicks on the view. In contrast to the View.@click event,
the immediate-click event is emitted as soon as the user clicks on
the view, and is not inhibited by a View.@double-click event. This event
is useful for interactive experiences that require feedback without delay.
Example
// Set up an immediate-click event handler and retrieve the screen pointview.on("immediate-click", function(event) { // the hitTest() checks to see if any graphics in the view // intersect the given screen x, y coordinates view.hitTest(event) .then(getGraphics);}); immediate-double-click
immediate-double-click: CustomEvent<ImmediateDoubleClickEvent> Is emitted after two consecutive View.@immediate-click events.
In contrast to View.@double-click, an immediate-double-click cannot
be prevented by use of stopPropagation on the View.@immediate-click
event and can therefore be used to react to double-clicking independently of usage of the
View.@immediate-click event.
key-down
key-down: CustomEvent<KeyDownEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after a keyboard key is pressed.
Example
// Zoom in when user clicks on "a" button// Zoom out when user clicks on "s" buttonview.on("key-down", function(event){ console.log("key-down", event);
if (event.key === "a"){ let zm = view.zoom + 1;
view.goTo({ target: view.center, zoom: zm }); } else if(event.key == "s"){ let zm = view.zoom - 1;
view.goTo({ target: view.center, zoom: zm }); }}); key-up
key-up: CustomEvent<KeyUpEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after a keyboard key is released.
layerview-create
layerview-create: CustomEvent<LayerViewCreateEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after each layer in the map has a corresponding LayerView created and rendered in the view.
- See also
Example
// This function fires each time a layer view is created for a layer in// the map of the view.view.on("layerview-create", function(event) { // The event contains the layer and its layer view that has just been // created. Here we check for the creation of a layer view for a layer with // a specific id, and log the layer view if (event.layer.id === "satellite") { // The LayerView for the desired layer console.log(event.layerView); }}); layerview-create-error
layerview-create-error: CustomEvent<LayerViewCreateErrorEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires when an error occurs during the creation of a LayerView after a layer has been added to the map.
- See also
Example
// This function fires each time an error occurs during the creation of a layerviewview.on("layerview-create-error", function(event) { console.error("LayerView failed to create for layer with the id: ", event.layer.id);}); layerview-destroy
layerview-destroy: CustomEvent<LayerViewDestroyEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after a LayerView is destroyed and is no longer rendered in the view. This happens for example when a layer is removed from the map of the view.
mouse-wheel
mouse-wheel: CustomEvent<ViewMouseWheelEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires when a wheel button of a pointing device (typically a mouse) is scrolled on the view.
Example
view.on("mouse-wheel", function(event){ // deltaY value is positive when wheel is scrolled up // and it is negative when wheel is scrolled down. console.log(event.deltaY);}); pointer-down
pointer-down: CustomEvent<PointerDownEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after a mouse button is pressed, or a finger touches the display.
pointer-enter
pointer-enter: CustomEvent<PointerEnterEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after a mouse cursor enters the view, or a display touch begins.
pointer-leave
pointer-leave: CustomEvent<PointerLeaveEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after a mouse cursor leaves the view, or a display touch ends.
pointer-move
pointer-move: CustomEvent<PointerMoveEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after the mouse or a finger on the display moves.
Example
// Fires `pointer-move` event when user clicks on "Shift"// key and moves the pointer on the view.view.on('pointer-move', ["Shift"], function(event){ let point = view.toMap({x: event.x, y: event.y}); bufferPoint(point);}); pointer-up
pointer-up: CustomEvent<PointerUpEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires after a mouse button is released, or a display touch ends.
resize
resize: CustomEvent<ViewResizeEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires when the view's size changes.
vertical-two-finger-drag
vertical-two-finger-drag: CustomEvent<VerticalTwoFingerDragEvent> - Since
- ArcGIS Maps SDK for JavaScript 5.0
Fires while the two pointers are dragged on the view.
Example
view.on("vertical-two-finger-drag", (event) => { // Display the distance moved vertically from the drag origin. console.log("y distance:", event.y);});