@aidenlx/player/types/providers/video/VideoElement.d.ts

Headless web components that make integrating media on the a web a breeze.

import { CSSResultGroup, TemplateResult } from 'lit';
import { Html5MediaElement } from '../html5';
import { VideoFullscreenController } from './fullscreen';
import { VideoPresentationController } from './presentation';
/**
 * Embeds video content into documents via the native `<video>` element. It may contain
 * one or more video sources, represented using the `src` attribute or the `<source>` element: the
 * browser will choose the most suitable one.
 *
 * The list of [supported media formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats)
 * varies from one browser to the other. You should either provide your video in a single format
 * that all the relevant browsers support, or provide multiple video sources in enough different
 * formats that all the browsers you need to support are covered.
 *
 * 💡 This element contains the exact same interface as the `<video>` element. It redispatches
 * all the native events if needed, but prefer the `vds-*` variants (eg: `vds-play`) as they
 * iron out any browser issues.
 *
 * @tagname vds-video
 * @slot - Used to pass in `<source>` and `<track>` elements to the underlying HTML5 media player.
 * @csspart media - The video element (`<video>`).
 * @csspart video - Alias for `media` part.
 * @events ./presentation/events.ts
 * @example
 * ```html
 * <vds-video src="/media/video.mp4" poster="/media/poster.png">
 *   <!-- Additional media resources here. -->
 * </vds-video>
 * ```
 * @example
 * ```html
 * <vds-video poster="/media/poster.png">
 *   <source src="/media/video.mp4" type="video/mp4" />
 *   <track default kind="subtitles" src="/media/subs/en.vtt" srclang="en" label="English" />
 * </vds-video>
 * ```
 */
export declare class VideoElement extends Html5MediaElement {
    static get styles(): CSSResultGroup;
    static get parts(): string[];
    /**
     * 🧑‍🔬 **EXPERIMENTAL:** Whether the browser should automatically toggle picture-in-picture mode as
     * the user switches back and forth between this document and another document or application.
     */
    autoPiP: boolean | undefined;
    /**
     * 🧑‍🔬 **EXPERIMENTAL:** Prevents the browser from suggesting a picture-in-picture context menu or
     * to request picture-in-picture automatically in some cases.
     *
     * @link https://w3c.github.io/picture-in-picture/#disable-pip
     */
    disablePiP: boolean | undefined;
    /**
     * A URL for an image to be shown while the video is downloading. If this attribute isn't
     * specified, nothing is displayed until the first frame is available, then the first frame is
     * shown as the poster frame.
     */
    get poster(): string;
    set poster(newPoster: string);
    get mediaElement(): HTMLVideoElement | undefined;
    get videoElement(): HTMLVideoElement | undefined;
    get engine(): HTMLVideoElement | undefined;
    get videoEngine(): HTMLVideoElement | undefined;
    connectedCallback(): void;
    protected render(): TemplateResult;
    protected _renderVideo(): TemplateResult;
    /**
     * Override this to modify video CSS Parts.
     */
    protected _getVideoPartAttr(): string;
    /**
     * Can be used by attaching engine such as `hls.js` to prevent src attr being set on
     * `<video>` element.
     */
    protected _shouldSetVideoSrcAttr(): boolean;
    handleMediaCanLoad(): Promise<void>;
    /**
     * Issues an asynchronous request to display the video in picture-in-picture mode.
     *
     * It's not guaranteed that the video will be put into picture-in-picture. If permission to enter
     * that mode is granted, the returned `Promise` will resolve and the video will receive a
     * `enterpictureinpicture` event to let it know that it's now in picture-in-picture.
     *
     * @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestPictureInPicture
     */
    requestPictureInPicture(): Promise<PictureInPictureWindow | undefined>;
    readonly presentationController: VideoPresentationController;
    readonly fullscreenController: VideoFullscreenController;
}
//# sourceMappingURL=VideoElement.d.ts.map