VideoPlayerViewModel

AMD: require(["esri/widgets/VideoPlayer/VideoPlayerViewModel"], (VideoPlayerViewModel) => { /* code goes here */ });
ESM: import VideoPlayerViewModel from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
Class: esri/widgets/VideoPlayer/VideoPlayerViewModel
Inheritance: VideoPlayerViewModel Accessor
Since: ArcGIS Maps SDK for JavaScript 4.30
beta

The VideoPlayerViewModel class provides the logic for the VideoPlayer widget.

See also
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
Name Type Summary Class

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

VideoPlayerViewModel

The current time of the video layer, in seconds.

VideoPlayerViewModel

The name of the class.

Accessor

The duration of the video layer, in seconds.

VideoPlayerViewModel

Indicates whether the video layer has ended.

VideoPlayerViewModel

Determines which telemetry elements to follow when the video layer is playing.

VideoPlayerViewModel

The VideoLayer to play.

VideoPlayerViewModel

The metadata associated with the video layer.

VideoPlayerViewModel

Indicates whether the video layer is playing.

VideoPlayerViewModel

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

VideoPlayerViewModel

The state of the video layer.

VideoPlayerViewModel

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.

Possible Values:"can-play" |"not-ready" |"paused" |"playing" |"ready" |"waiting" |"data-loaded" |"error"

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
Name 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

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
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
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();

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.