@douyinfe/semi-ui/lib/es/videoPlayer/index.d.ts

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import React from 'react';
import BaseComponent from '../_base/baseComponent';
import VideoPlayerFoundation, { VideoPlayerAdapter } from '@douyinfe/semi-foundation/lib/es/videoPlayer/foundation';
import '@douyinfe/semi-foundation/lib/es/videoPlayer/videoPlayer.css';
import { Locale } from '../locale/interface';
import { Marker } from '@douyinfe/semi-foundation/lib/es/videoPlayer/progressFoundation';
export interface VideoPlayerProps {
    autoPlay: boolean;
    captionsSrc?: string;
    className?: string;
    clickToPlay: boolean;
    controlsList?: Array<string>;
    crossOrigin?: React.MediaHTMLAttributes<HTMLVideoElement>['crossOrigin'];
    defaultPlaybackRate: number;
    defaultQuality?: string;
    defaultRoute?: string;
    height?: number | string;
    loop?: boolean;
    markers?: Marker[];
    muted: boolean;
    onPause?: () => void;
    onPlay?: () => void;
    onQualityChange?: (quality: string) => void;
    onRateChange?: (rate: number) => void;
    onRouteChange?: (route: string) => void;
    onVolumeChange?: (volume: number) => void;
    playbackRateList: {
        label: string;
        value: number;
    }[];
    poster?: string;
    qualityList?: Array<{
        label: string;
        value: string;
    }>;
    routeList?: Array<{
        label: string;
        value: string;
    }>;
    seekTime?: number;
    src?: string;
    style?: React.CSSProperties;
    theme: string;
    volume: number;
    width?: number | string;
}
export interface VideoPlayerState {
    bufferedValue: number;
    currentQuality: string;
    currentRoute: string;
    currentTime: number;
    isError: boolean;
    isMirror: boolean;
    isPlaying: boolean;
    muted: boolean;
    notificationContent: string;
    playbackRate: number;
    playbackRateList: {
        label: string;
        value: number;
    }[];
    showNotification: boolean;
    showControls: boolean;
    src: string;
    totalTime: number;
    volume: number;
}
declare class VideoPlayer extends BaseComponent<VideoPlayerProps, VideoPlayerState> {
    static defaultProps: VideoPlayerProps;
    private videoRef;
    private videoWrapperRef;
    foundation: VideoPlayerFoundation;
    constructor(props: VideoPlayerProps);
    get adapter(): VideoPlayerAdapter<VideoPlayerProps, VideoPlayerState>;
    static getDerivedStateFromProps(props: VideoPlayerProps, state: VideoPlayerState): Partial<VideoPlayerState>;
    componentDidMount(): void;
    componentWillUnmount(): void;
    handleMouseEnterWrapper: () => void;
    handleMouseLeaveWrapper: () => void;
    handleTimeChange: (value: number) => void;
    handleTimeUpdate: () => void;
    handleError: () => void;
    handlePlay: () => void;
    handlePause: () => void;
    handleCanPlay: () => void;
    handleWaiting: (locale: Locale['VideoPlayer']) => void;
    handleStalled: (locale: Locale['VideoPlayer']) => void;
    handleProgress: () => void;
    handleEnded: () => void;
    handleDurationChange: () => void;
    handleVolumeChange: (value: number) => void;
    handleVolumeSilent: () => void;
    handleRateChange: (option: {
        label: string;
        value: number;
    }, locale: Locale['VideoPlayer']) => void;
    handleQualityChange: (option: {
        label: string;
        value: string;
    }, locale: Locale['VideoPlayer']) => void;
    handleRouteChange: (option: {
        label: string;
        value: string;
    }, locale: Locale['VideoPlayer']) => void;
    handleMirror: (locale: Locale['VideoPlayer']) => void;
    handleFullscreen: () => void;
    handlePictureInPicture: () => void;
    getVolumeIcon: () => React.JSX.Element;
    isResourceNotFound: () => boolean;
    renderTime: () => React.JSX.Element;
    renderResourceNotFound: (locale: Locale['VideoPlayer']) => React.JSX.Element;
    renderPauseIcon: () => React.JSX.Element;
    renderError: (locale: Locale['VideoPlayer']) => React.JSX.Element;
    renderPoster: () => React.JSX.Element;
    renderNotification: () => React.JSX.Element;
    renderVolume: () => React.JSX.Element;
    renderIconButton: (icon: React.ReactNode, onClick: () => void, name: string) => React.JSX.Element;
    renderDropdownButton: (currentValue: string | number, list: {
        label: string;
        value: number | string;
    }[], handleChange: (option: {
        label: string;
        value: any;
    }, locale: Locale['VideoPlayer']) => void, name: string, locale: Locale['VideoPlayer']) => React.JSX.Element;
    render(): React.JSX.Element;
}
export default VideoPlayer;