VideoPlayerViewModel | References | ArcGIS Maps SDK for JavaScript

import VideoPlayerViewModel from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";

const VideoPlayerViewModel = await $arcgis.import("@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js");

Inheritance: VideoPlayerViewModel→Accessor

Since: ArcGIS Maps SDK for JavaScript 4.30

The VideoPlayerViewModel class provides the logic for the VideoPlayer widget and Video Player component.

See also

VideoPlayer - Deprecated since 4.33. Use the Video Player component instead.

Example

const videoPlayerViewModel = new VideoPlayerViewModel({
  layer: videoLayer,
  view
});,

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	VideoPlayerViewModelProperties

See the properties table for a list of all the properties that may be passed into the constructor.

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
buffered readonly	number
currentTime readonly	number
declaredClass readonly inherited	string	Accessor
duration readonly	number
ended readonly	boolean
followingMode	"follow-sensor" \| "follow-frame" \| "follow-both" \| "none"
layer	VideoLayer \| null \| undefined
metadata readonly	{ missionInfo: Record<string, string>; platformInfo: Record<string, string>; frameInfo: Record<string, string>; } \| null
playing readonly	boolean
seekLength	number
state readonly	VideoState \| "error"
view	MapView \| null \| undefined

buffered

readonly Property

Type: number

The amount of the video layer that has been buffered, in seconds.

currentTime

readonly Property

Type: number

The current time of the video layer, in seconds.

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

The name of the class. The declared class name is formatted as esri.folder.className.

duration

readonly Property

Type: number

The duration of the video layer, in seconds.

ended

readonly Property

Type: boolean

Indicates whether the video layer has ended.

followingMode

Property

Type: "follow-sensor" | "follow-frame" | "follow-both" | "none"

Determines which telemetry elements to follow when the video layer is playing. The following telemetry elements are available:

follow-sensor: Follows the sensor location.
follow-frame: Follows the frame center.
follow-both: Follows both the sensor location and the frame center.

Default value: "follow-both"

Example

// Follow the sensor location.
videoPlayerViewModel.followingMode = "follow-sensor";

layer

Property

Type: VideoLayer | null | undefined

The VideoLayer to play.

Example

// Set the video player view model's layer to a video layer.
videoPlayerViewModel.layer = videoLayer;

metadata

readonly Property

Type: { missionInfo: Record<string, string>; platformInfo: Record<string, string>; frameInfo: Record<string, string>; } | null

The metadata associated with the video layer.

playing

readonly Property

Type: boolean

Indicates whether the video layer is playing.

seekLength

Property

Type: number

The number of seconds to seek forward or backward when the user clicks the seek forward or seek backward buttons.

Default value: 10

Example

// Seek the video layer forward by 5 seconds.
videoPlayerViewModel.seekLength = 5;

state

readonly Property

Type: VideoState | "error"

The state of the video layer.

view

Property

Type: MapView | null | undefined

The MapView in which the video layer is displayed.

Example

// Set the video player view model's view to a map view.
videoPlayerViewModel.view = mapView;

Methods

Method	Signature	Class
changeGraphicsColor	changeGraphicsColor(color: Color): void
changePlaybackSpeed	changePlaybackSpeed(speed: number): void
pause	pause(): void
play	play(): void
seekBackward	seekBackward(): void
seekForward	seekForward(): void
seekTo	seekTo(seekToTime: number): void
seekToBeginning	seekToBeginning(): void
seekToEnding	seekToEnding(): void
toggleFrameCenterDisplay	toggleFrameCenterDisplay(): void
toggleFrameDisplay	toggleFrameDisplay(): void
toggleFrameOutlineDisplay	toggleFrameOutlineDisplay(): void
toggleSensorDisplay	toggleSensorDisplay(): void
toggleSensorSightLineDisplay	toggleSensorSightLineDisplay(): void
toggleSensorTrailDisplay	toggleSensorTrailDisplay(): void

changeGraphicsColor

Method

Signature: changeGraphicsColor (color: Color): void

Changes the color of the graphics drawn on the map to represent telemetry elements such as sensor location and frame.

Parameters

Parameter	Type	Description	Required
color	Color	The color of the graphics

Returns: void

Example

// Change the video layer telemetry graphics color to red.
videoPlayerViewModel.changeGraphicsColor(new Color("red"));

changePlaybackSpeed

Method

Signature: changePlaybackSpeed (speed: number): void

Changes the playback speed of the video layer.

Parameters

Parameter	Type	Description	Required
speed	number	The playback speed of the video. A value of 1.0 is normal speed, 0.5 is half speed, and 2.0 is double speed.

Returns: void

Example

// Change the video layer playback speed to 2x.
videoPlayerViewModel.changePlaybackSpeed(2);

pause

Method

Signature: pause (): void

Pauses the video layer.

Returns: void

Example

// Pause the video layer.
videoPlayerViewModel.pause();

play

Method

Signature: play (): void

Plays the video layer.

Returns: void

Example

// Play the video layer.
videoPlayerViewModel.play();

seekBackward

Method

Signature: seekBackward (): void

Seeks the video layer backward by the number of seconds specified by the seekLength property.

See also

seekLength

Returns: void

Example

// Seek the video layer backward by 20 seconds.
videoPlayerViewModel.seekLength = 20;
videoPlayerViewModel.seekBackward();

seekForward

Method

Signature: seekForward (): void

Seeks the video layer forward by the number of seconds specified by the seekLength property.

See also

seekLength

Returns: void

Example

// Seek the video layer forward by 20 seconds.
videoPlayerViewModel.seekLength = 20;
videoPlayerViewModel.seekForward();

seekTo

Method

Signature: seekTo (seekToTime: number): void

Seeks the video layer to the specified time.

Parameters

Parameter	Type	Description	Required
seekToTime	number	The time to seek to, in seconds.

Returns: void

Example

// Seek the video layer to 30 seconds.
videoPlayerViewModel.seekTo(30);

seekToBeginning

Method

Signature: seekToBeginning (): void

Seeks the video layer to the beginning.

Returns: void

Example

// Seek the video layer to the beginning.
videoPlayerViewModel.seekToBeginning();

seekToEnding

Method

Signature: seekToEnding (): void

Seeks the video layer to the ending.

Returns: void

Example

// Seek the video layer to the ending.
videoPlayerViewModel.seekToEnding();

toggleFrameCenterDisplay

Method

Signature: toggleFrameCenterDisplay (): void

Toggles the frame center display.

Returns: void

Example

// Toggle the frame center display.
videoPlayerViewModel.toggleFrameCenterDisplay();

toggleFrameDisplay

Method

Signature: toggleFrameDisplay (): void

Toggles the video frame image draped on the map.

Returns: void

Example

// Toggle the frame display.
videoPlayerViewModel.toggleFrameDisplay();

toggleFrameOutlineDisplay

Method

Signature: toggleFrameOutlineDisplay (): void

Toggles the frame outline display.

Returns: void

Example

// Toggle the frame outline display.
videoPlayerViewModel.toggleFrameOutlineDisplay();

toggleSensorDisplay

Method

Signature: toggleSensorDisplay (): void

Toggles the sensor display.

Returns: void

Example

// Toggle the sensor display.
videoPlayerViewModel.toggleSensorDisplay();

toggleSensorSightLineDisplay

Method

Signature: toggleSensorSightLineDisplay (): void

Toggles the sensor sight line display.

Returns: void

Example

// Toggle the sensor sight line display.
videoPlayerViewModel.toggleSensorSightLineDisplay();

toggleSensorTrailDisplay

Method

Signature: toggleSensorTrailDisplay (): void

Toggles the sensor trail display.

Returns: void

Example

// Toggle the sensor trail display.
videoPlayerViewModel.toggleSensorTrailDisplay();