视频播放器

import { VideoPlayer } from '@fibrous/semi-ui-solid';

const src = '/assets/video/vchart-show-video.mp4';
const poster = '/assets/poster2.jpeg';

export default function VideoPlayerDemo() {
    return <VideoPlayer height={630} src={src} poster={poster} />;
}

import { VideoPlayer } from '@fibrous/semi-ui-solid';

const src = '/assets/video/vchart-show-video.mp4';
const poster = '/assets/poster2.jpeg';

export default function VideoPlayerDemo() {
    return <VideoPlayer height={630} src={src} poster={poster} controlsList={['play', 'time', 'volume', 'playbackRate', 'fullscreen']} />;
}

import { VideoPlayer } from '@fibrous/semi-ui-solid';

const src = '/assets/video/vchart-show-video.mp4';
const poster = '/assets/poster2.jpeg';

export default function VideoPlayerDemo() {
    return <VideoPlayer height={630} src={src} poster={poster} loop />;
}

import { createSignal } from 'solid-js';
import { Select, VideoPlayer } from '@fibrous/semi-ui-solid';

const src = '/assets/video/vchart-show-video.mp4';
const poster = '/assets/poster2.jpeg';
const optionList = [
    { label: '5s', value: 5 },
    { label: '10s', value: 10 },
    { label: '15s', value: 15 },
];

export default function VideoPlayerDemo() {
    const [seekTime, setSeekTime] = createSignal(5);

    return (
        <div>
            <div>
                <span style={{ 'margin-bottom': '10px' }}>请选择快进快退时间</span>
                <Select
                    aria-label="请选择快进快退时间"
                    value={seekTime()}
                    style={{ width: '100px', 'margin-left': '10px' }}
                    onChange={(value) => {
                        if (typeof value === 'number') setSeekTime(value);
                    }}
                    optionList={optionList}
                    placeholder="请选择快进快退时间"
                />
            </div>
            <VideoPlayer height={630} style={{ 'margin-top': '10px' }} src={src} poster={poster} seekTime={seekTime()} />
        </div>
    );
}

import { VideoPlayer } from '@fibrous/semi-ui-solid';

const playbackRateList = [
    { label: '0.5x', value: 0.5 },
    { label: '1.0x', value: 1 },
    { label: '1.5x', value: 1.5 },
    { label: '2.0x', value: 2 },
];
const src = '/assets/video/vchart-show-video.mp4';
const poster = '/assets/poster2.jpeg';

export default function VideoPlayerDemo() {
    return <VideoPlayer height={630} src={src} poster={poster} playbackRateList={playbackRateList} />;
}

import { VideoPlayer } from '@fibrous/semi-ui-solid';

const src = '/assets/video/vchart-show-video.mp4';
const poster = '/assets/poster2.jpeg';

export default function VideoPlayerDemo() {
    return <VideoPlayer height={630} src={src} poster={poster} muted />;
}

import { createSignal } from 'solid-js';
import { VideoPlayer } from '@fibrous/semi-ui-solid';

const playList = [
    {
        src: '/assets/video/vchart-show-video.mp4',
        quality: '1080p',
    },
    {
        src: '/assets/video/vchart-show-video.mp4',
        quality: '480p',
    },
];
const poster = '/assets/poster2.jpeg';
const qualityList = [
    { label: '1080p', value: '1080p' },
    { label: '480p', value: '480p' },
];

export default function VideoPlayerDemo() {
    const [src, setSrc] = createSignal(playList[0].src);

    const updateVideoSource = (quality: string) => {
        const source = playList.find((item) => item.quality === quality);
        if (source) setSrc(source.src);
    };

    return (
        <VideoPlayer
            height={630}
            src={src()}
            poster={poster}
            defaultQuality="1080p"
            qualityList={qualityList}
            onQualityChange={(quality) => {
                console.log('quality change', quality);
                updateVideoSource(quality);
            }}
        />
    );
}

import { VideoPlayer } from '@fibrous/semi-ui-solid';

const src = '/assets/video/vchart-show-video.mp4';
const poster = '/assets/poster2.jpeg';
const markers = [
    {
        start: 0,
        title: '片头',
    },
    {
        start: 4,
        title: '功能介绍',
    },
    {
        start: 38,
        title: 'Figma Plugin',
    },
    {
        start: 51,
        title: '片尾',
    },
];

export default function VideoPlayerDemo() {
    return <VideoPlayer height={630} src={src} poster={poster} markers={markers} />;
}

import { VideoPlayer } from '@fibrous/semi-ui-solid';

const src = '/assets/video/vchart-show-video.mp4';
const poster = '/assets/poster2.jpeg';

export default function VideoPlayerDemo() {
    return <VideoPlayer src={src} poster={poster} height={630} theme="light" />;
}

import { Button, VideoPlayer } from '@fibrous/semi-ui-solid';

const src = '/assets/video/vchart-show-video.mp4';
const poster = '/assets/poster2.jpeg';

export default function VideoPlayerDemo() {
    let video1: HTMLVideoElement | undefined;
    let video2: HTMLVideoElement | undefined;

    const handlePlayAll = () => {
        void video1?.play();
        void video2?.play();
    };

    const handlePauseAll = () => {
        video1?.pause();
        video2?.pause();
    };

    return (
        <div>
            <div style={{ 'margin-bottom': '12px' }}>
                <Button onClick={handlePlayAll} style={{ 'margin-right': '8px' }}>
                    同时播放
                </Button>
                <Button onClick={handlePauseAll}>同时暂停</Button>
            </div>
            <div style={{ display: 'flex', gap: '12px' }}>
                <VideoPlayer ref={(element) => (video1 = element)} src={src} poster={poster} height={315} width="50%" />
                <VideoPlayer ref={(element) => (video2 = element)} src={src} poster={poster} height={315} width="50%" />
            </div>
        </div>
    );
}