@arcgis/core/layers/support/VideoElement.d.ts

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

import type MediaElementBase from "./MediaElementBase.js";
import type { VideoSource } from "../media/types.js";
import type { MediaElementBaseProperties } from "./MediaElementBase.js";

export interface VideoElementProperties extends MediaElementBaseProperties, Partial<Pick<VideoElement, "video">> {}

/**
 * Represents a video element referenced in the MediaLayer's [MediaLayer.source](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer/#source).
 * MediaLayer can display videos that are supported by web browsers. Refer to the [common codecs](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs) document for supported video types.
 *
 * Coordinates of the image and video elements can be specified in any spatial reference and are projected to the view's [spatial reference](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#spatialReference).
 * The content is stretched linearly between the coordinates, therefore it's recommended for the image or video to match the view's spatial reference to align correctly, especially for content
 * covering large areas like the entire earth.
 *
 * ```js
 * // create a video element by setting video param to point to the video file url
 * // set the geographic location of the video file on the map using an extent
 * const element = new VideoElement({
 *   video: "https://arcgis.github.io/arcgis-samples-javascript/sample-data/media-layer/videos/hurricanes_aerosol-aug.mp4",
 *   georeference: new ExtentAndRotationGeoreference({
 *     extent: new Extent({
 *       xmin: -150,
 *       ymin: 1,
 *       xmax: 20,
 *       ymax: 80,
 *       spatialReference: {
 *         wkid: 4326
 *       }
 *     })
 *   })
 * });
 * ```
 *
 * @since 4.24
 * @see [MediaLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer/)
 * @see [Sample - MediaLayer with video](https://developers.arcgis.com/javascript/latest/sample-code/layers-medialayer-video/)
 */
export default class VideoElement extends MediaElementBase {
  constructor(properties?: VideoElementProperties);
  /** The video content referenced in the video element instance. The content matches the video referenced in the [video](https://developers.arcgis.com/javascript/latest/references/core/layers/support/VideoElement/#video) parameter. */
  get content(): HTMLVideoElement | null | undefined;
  /** The element type. */
  get type(): "video";
  /**
   * The video element to be added to the [media layer's source](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer/#source). The video
   * element can be URL string pointing the video for example.
   *
   * @example
   * // create a video element by setting video param to point to the video file url
   * // set the geographic location of the video file on the map using an extent
   * const element = new VideoElement({
   *   video: "https://arcgis.github.io/arcgis-samples-javascript/sample-data/media-layer/videos/hurricanes_aerosol-aug.mp4",
   *   georeference: new ExtentAndRotationGeoreference({
   *     extent: new Extent({
   *       xmin: -150,
   *       ymin: 1,
   *       xmax: 20,
   *       ymax: 80,
   *       spatialReference: {
   *         wkid: 4326
   *       }
   *     })
   *   })
   * });
   *
   * // add the video element to the media layer
   * const layer = new MediaLayer({
   *   source: [element],
   *   title: "2017 Hurricanes and Aerosols Simulation",
   *   copyright: "NASA's Goddard Space Flight Center"
   * });
   */
  accessor video: VideoSource;
}