VideoPlayerViewModel | API Reference | ArcGIS Maps SDK for JavaScript 4.30

The VideoPlayerViewModel class provides the logic for the VideoPlayer widget.

See also

VideoPlayer

Example

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

Constructors

VideoPlayerViewModel Constructor new VideoPlayerViewModel(properties)

Parameter

properties Object

optional

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

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.

Show inherited properties

Hide inherited properties

Type	Summary	Class
Number	The amount of the video layer that has been buffered, in seconds.	VideoPlayerViewModel
Number	The current time of the video layer, in seconds.	VideoPlayerViewModel
String	The name of the class.	Accessor
Number	The duration of the video layer, in seconds.	VideoPlayerViewModel
Boolean	Indicates whether the video layer has ended.	VideoPlayerViewModel
String	Determines which telemetry elements to follow when the video layer is playing.	VideoPlayerViewModel
VideoLayer\|null\|undefined	The VideoLayer to play.	VideoPlayerViewModel
Object	The metadata associated with the video layer.	VideoPlayerViewModel
Boolean	Indicates whether the video layer is playing.	VideoPlayerViewModel
Number	The number of seconds to seek forward or backward when the user clicks the seek forward or seek backward buttons.	VideoPlayerViewModel
String\|null\|undefined	The state of the video layer.	VideoPlayerViewModel
MapView\|null\|undefined	The MapView in which the video layer is displayed.	VideoPlayerViewModel

Property Details

buffered Property buffered Numberreadonly

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

currentTime Property currentTime Numberreadonly

The current time of the video layer, in seconds.

declaredClass Inherited Property declaredClass Stringreadonly Inherited from Accessor

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

duration Property duration Numberreadonly

The duration of the video layer, in seconds.

ended Property ended Booleanreadonly

Indicates whether the video layer has ended.

followingMode Property followingMode String

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.

Possible Values:"follow-sensor" |"follow-frame" |"follow-both"

Default Value:"follow-both"

Example

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

layer Property layer VideoLayer |null |undefined

The VideoLayer to play.

Default Value:null

Example

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

metadata Property metadata Objectreadonly

The metadata associated with the video layer.

playing Property playing Booleanreadonly

Indicates whether the video layer is playing.

seekLength Property seekLength 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 Property state String |null |undefinedreadonly

The state of the video layer.

view Property view MapView |null |undefined

The MapView in which the video layer is displayed.

Default Value:null

Example

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

Method Overview

Show inherited methods

Hide inherited methods

Return Type	Summary	Class
	Adds one or more handles which are to be tied to the lifecycle of the object.	Accessor
	Changes the color of the graphics drawn on the map to represent telemetry elements such as sensor location and frame.	VideoPlayerViewModel
	Changes the playback speed of the video layer.	VideoPlayerViewModel
Boolean	Returns true if a named group of handles exist.	Accessor
	Pauses the video layer.	VideoPlayerViewModel
	Plays the video layer.	VideoPlayerViewModel
	Removes a group of handles owned by the object.	Accessor
	Seeks the video layer backward by the number of seconds specified by the seekLength property.	VideoPlayerViewModel
	Seeks the video layer forward by the number of seconds specified by the seekLength property.	VideoPlayerViewModel
	Seeks the video layer to the specified time.	VideoPlayerViewModel
	Seeks the video layer to the beginning.	VideoPlayerViewModel
	Seeks the video layer to the ending.	VideoPlayerViewModel
	Toggles the frame center display.	VideoPlayerViewModel
	Toggles the frame outline display.	VideoPlayerViewModel
	Toggles the sensor display.	VideoPlayerViewModel
	Toggles the sensor sight line display.	VideoPlayerViewModel
	Toggles the sensor trail display.	VideoPlayerViewModel

Method Details

addHandles Inherited Method addHandles(handleOrHandles, groupKey) Inherited from Accessor

Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

this.addHandles(handle);

// Destroy the object
this.destroy();

Parameters

handleOrHandles WatchHandle|WatchHandle []

Handles marked for removal once the object is destroyed.

groupKey *

optional

Key identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.

changeGraphicsColor Method changeGraphicsColor(color)

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

Parameter

color Color

The color of the graphics

Example

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

changePlaybackSpeed Method changePlaybackSpeed(speed)

Changes the playback speed of the video layer.

Parameter

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.

Example

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

hasHandles Inherited Method hasHandles(groupKey){Boolean} Inherited from Accessor

Returns true if a named group of handles exist.

Parameter

groupKey *

optional

A group key.

Returns

Type	Description
Boolean	Returns `true` if a named group of handles exist.

Example

// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

pause Method pause()

Pauses the video layer.

Example

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

play Method play()

Plays the video layer.

Example

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

removeHandles Inherited Method removeHandles(groupKey) Inherited from Accessor

Removes a group of handles owned by the object.

Parameter

groupKey *

optional

A group key or an array or collection of group keys to remove.

Example

obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

seekBackward Method seekBackward()

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

See also

seekLength

Example

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

seekForward Method seekForward()

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

See also

seekLength

Example

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

seekTo Method seekTo(seekToTime)

Seeks the video layer to the specified time.

Parameter

seekToTime Number

The time to seek to, in seconds.

Example

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

seekToBeginning Method seekToBeginning()

Seeks the video layer to the beginning.

Example

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

seekToEnding Method seekToEnding()

Seeks the video layer to the ending.

Example

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

toggleFrameCenterDisplay Method toggleFrameCenterDisplay()

Toggles the frame center display.

Example

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

toggleFrameOutlineDisplay Method toggleFrameOutlineDisplay()

Toggles the frame outline display.

Example

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

toggleSensorDisplay Method toggleSensorDisplay()

Toggles the sensor display.

Example

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

toggleSensorSightLineDisplay Method toggleSensorSightLineDisplay()

Toggles the sensor sight line display.

Example

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

toggleSensorTrailDisplay Method toggleSensorTrailDisplay()

Toggles the sensor trail display.

Example

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