@atmtfy/video-background/src/videoBackground.d.ts

Automatic background video from various sources (Youtube, MP4, vimeo) with autoplay across devices. No JS dependencies.

import Icons from './utils/icons';
/**
 * @class VideoBackground creates a custom web component
 * @todo separate statuses and capabilities and stores into their own objects
 * @todo allow unmuting
 */
export declare class VideoBackground extends HTMLElement {
    breakpoints?: number[]; /** Contains an array of breakpoints to reload smaller sources when passed */
    browserCanAutoPlay: boolean; /** Dynamically checks when  */
    container: HTMLElement;
    debug: {
        enabled: boolean;
        verbose: boolean;
    };
    can: VideoCan;
    observer?: IntersectionObserver;
    muteButton?: HTMLElement;
    overlayEl?: HTMLElement;
    pauseButton?: HTMLElement;
    player?: YoutubeAPIPlayer;
    playerReady: boolean;
    isIntersecting: boolean;
    icons?: Icons;
    posterEl?: HTMLImageElement;
    scaleFactor: number;
    size?: string;
    startTime?: number;
    sourceId?: string;
    hasStarted: boolean;
    sources?: SourcesShape;
    sourcesReady: boolean;
    type?: 'local' | 'youtube' | 'vimeo' | 'error';
    url?: string;
    videoAspectRatio: number;
    videoCanAutoPlay: boolean;
    videoEl?: HTMLVideoElement;
    widthStore?: number;
    constructor();
    init(): void;
    buildDOM(): void;
    buildIcons(): void;
    buildVideo(): false | undefined;
    handleFallbackNoVideo(): void;
    /**
     * @method initializeVideoAPI Load the API for the appropriate source. This abstraction normalizes the
     * interfaces for YouTube and Vimeo, and potentially other providers.
     * @return {undefined}
     */
    initializeVideoAPI(): void;
    /**
    * @method initializeVideoPlayer Initialize the video player and register its callbacks.
    * @return {undefined}
    */
    initializeVideoPlayer(): false | undefined;
    syncPlayer(): void;
    /**
     * @method scaleVideo The IFRAME will be the entire width and height of its container, but the video
     * may be a completely different size and ratio. Scale up the IFRAME so the inner video
     * behaves in the proper `mode`, with optional additional scaling to zoom in. Also allow
     * ImageLoader to reload the custom fallback image, if appropriate.
     * @param {Number} [scaleValue] A multiplier used to increase the scaled size of the media.
     * @return {undefined}
     */
    scaleVideo(scaleValue?: number): void;
    /**
     * @method buildLocalVideo Load a video element using local files or sets of files.
     * @todo abstract out these functions, maybe to a separate class?
     * @returns {undefined}
     */
    buildLocalVideo(): void;
    handlePlayCheck(): void;
    setPlayerReady(isReady?: boolean): void;
    toggleMute(): void;
    togglePause(): void;
    muteVideo(): void;
    getSourcesFilteredBySize(sources: SourcesShape): SourcesShape;
    checkIfPassedBreakpoints(): void;
    checkForInherentPoster(): HTMLImageElement | false;
    buildPoster(): false | undefined;
    buildOverlay(): void;
    buildIntersectionObserver(): void;
    handleIntersection(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
    get autoplay(): boolean;
    get loop(): boolean;
    get muted(): boolean;
    set autoplay(isAutoplay: boolean);
    set muted(isMuted: boolean);
    set loop(isLoop: boolean);
    get mode(): "fit" | "fill";
    set mode(fitOrFill: "fit" | "fill");
    get status(): loadingStatus;
    /** Updates status on the actual element as well as the property of the class */
    set status(status: loadingStatus);
    get poster(): string | false;
    get posterSet(): string | false;
    get src(): string | null;
    set src(srcString: string | null);
    /**
     * Sets the poster url string, and sets loading that poster into motion
     */
    set poster(posterString: string | false);
    compileSources(srcString: string | null): false | undefined;
    /**
     * Removes conflicting sources of different types (can only have one of each type)
     */
    cleanupSources(sources: SourcesShape): SourcesShape;
    prepareSingleSource(url: string, size?: number | false): LocalSource | Source;
    getFileType(url: string): FileType | false;
    handleMalformedSource(url: string): Source;
    getSourceType(url: string): SourceType;
    connectedCallback(): void;
    /**
     * @method logger A guarded console logger.
     * @param msg the message to send
     * @param always Whether to always show if not verbose
     * @return {undefined}
     */
    logger(msg: any, always?: boolean): void;
}