tiny-essentials
Version:
Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.
91 lines • 4.5 kB
text/typescript
export default TinyHtmlVideo;
/**
* TinyVideo is a helper class for managing <video> elements.
* It allows configuring all standard attributes such as src, poster, controls,
* autoplay, loop, muted, playsinline, controlslist, crossorigin, preload,
* disablepictureinpicture, disableremoteplayback, width, height, and volume,
* with validation.
*
* @example
* const video = new TinyHtmlVideo({
* src: 'video.mp4',
* controls: true,
* autoplay: false,
* width: 640,
* height: 360
* });
*
* @extends TinyHtmlMedia<HTMLVideoElement>
*/
declare class TinyHtmlVideo extends TinyHtmlMedia<HTMLVideoElement> {
/**
* Creates a new TinyVideo instance.
* @param {Object} config
* @param {string} [config.src=''] - The video file URL.
* @param {string} [config.poster=''] - Image URL shown before playback starts.
* @param {boolean} [config.controls=false] - Whether to show default controls.
* @param {boolean} [config.autoplay=false] - Start playback automatically (muted may be required).
* @param {boolean} [config.loop=false] - Replay automatically when finished.
* @param {boolean} [config.muted=false] - Start playback muted.
* @param {boolean} [config.playsinline=false] - Play inline instead of fullscreen (mobile devices).
* @param {'nodownload'|'nofullscreen'|'noremoteplayback'|string} [config.controlslist] - Restrict controls visibility.
* @param {'anonymous'|'use-credentials'} [config.crossorigin] - CORS setting for the video request.
* @param {boolean} [config.disablepictureinpicture=false] - Disable Picture-in-Picture mode.
* @param {boolean} [config.disableremoteplayback=false] - Disable casting / remote playback.
* @param {'auto'|'metadata'|'none'} [config.preload] - Preload behavior suggestion.
* @param {number} [config.width] - CSS pixel width of the video display.
* @param {number} [config.height] - CSS pixel height of the video display.
* @param {number} [config.volume] - Initial volume (0.0–1.0).
* @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes.
* @param {string} [config.mainClass=""] - Main CSS class applied.
*/
constructor({ src, poster, controls, autoplay, loop, muted, playsinline, controlslist, crossorigin, disablepictureinpicture, disableremoteplayback, preload, width, height, volume, tags, mainClass, }?: {
src?: string | undefined;
poster?: string | undefined;
controls?: boolean | undefined;
autoplay?: boolean | undefined;
loop?: boolean | undefined;
muted?: boolean | undefined;
playsinline?: boolean | undefined;
controlslist?: string | undefined;
crossorigin?: "anonymous" | "use-credentials" | undefined;
disablepictureinpicture?: boolean | undefined;
disableremoteplayback?: boolean | undefined;
preload?: "auto" | "none" | "metadata" | undefined;
width?: number | undefined;
height?: number | undefined;
volume?: number | undefined;
tags?: string | string[] | Set<string> | undefined;
mainClass?: string | undefined;
});
/** @param {string} poster */
set poster(poster: string);
/** @returns {string|null} */
get poster(): string | null;
/** @param {boolean} playsinline */
set playsinline(playsinline: boolean);
/** @returns {boolean} */
get playsinline(): boolean;
/** @param {boolean} disable */
set disablepictureinpicture(disable: boolean);
/** @returns {boolean} */
get disablepictureinpicture(): boolean;
/** @param {boolean} disable */
set disableremoteplayback(disable: boolean);
/** @returns {boolean} */
get disableremoteplayback(): boolean;
/** @param {'nodownload'|'nofullscreen'|'noremoteplayback'|string} controlslist */
set controlslist(controlslist: "nodownload" | "nofullscreen" | "noremoteplayback" | string);
/** @returns {string|null} */
get controlslist(): string | null;
/** @param {'anonymous'|'use-credentials'} crossorigin */
set crossorigin(crossorigin: "anonymous" | "use-credentials");
/** @returns {string|null} */
get crossorigin(): string | null;
/** @returns {Promise<void>|undefined} */
requestFullscreen(): Promise<void> | undefined;
/** @returns {Promise<boolean>} */
exitFullscreen(): Promise<boolean>;
}
import TinyHtmlMedia from '../TinyHtmlMedia.mjs';
//# sourceMappingURL=TinyHtmlVideo.d.mts.map