VideoPlayerViewModel | References | ArcGIS Maps SDK for JavaScript

import VideoPlayerViewModel from "@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();