VideoPlayer

<script setup lang="ts">
    import { VideoPlayer } from '@fibrous/semi-ui-vue';

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

<template>
    <VideoPlayer :height="630" :poster="poster" :src="src" />
</template>

<script setup lang="ts">
    import { VideoPlayer } from '@fibrous/semi-ui-vue';

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

<template>
    <VideoPlayer :controlsList="['play', 'time', 'volume', 'playbackRate', 'fullscreen']" :height="630" :poster="poster" :src="src" />
</template>

<script setup lang="ts">
    import { VideoPlayer } from '@fibrous/semi-ui-vue';

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

<template>
    <VideoPlayer :height="630" loop :poster="poster" :src="src" />
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Select, VideoPlayer } from '@fibrous/semi-ui-vue';

    const seekTime = ref<number | undefined>(5);

    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 },
    ];
</script>

<template>
    <div>
        <div>
            <span :style="{ marginBottom: '10px' }">请选择快进快退时间</span>
            <Select v-model="seekTime" aria-label="请选择快进快退时间" :optionList="optionList" placeholder="请选择快进快退时间" :style="{ width: '100px', marginLeft: '10px' }" />
        </div>
        <VideoPlayer :height="630" :poster="poster" :seekTime="seekTime" :src="src" :style="{ marginTop: '10px' }" />
    </div>
</template>

<script setup lang="ts">
    import { VideoPlayer } from '@fibrous/semi-ui-vue';

    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';
</script>

<template>
    <VideoPlayer :height="630" :playbackRateList="playbackRateList" :poster="poster" :src="src" />
</template>

<script setup lang="ts">
    import { VideoPlayer } from '@fibrous/semi-ui-vue';

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

<template>
    <VideoPlayer :height="630" muted :poster="poster" :src="src" />
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { VideoPlayer } from '@fibrous/semi-ui-vue';

    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' },
    ];

    const src = ref(playList[0].src);

    function onQualityChange(quality: string) {
        console.log('quality change', quality);
        const source = playList.find((item) => item.quality === quality);
        if (source) src.value = source.src;
    }
</script>

<template>
    <VideoPlayer defaultQuality="1080p" :height="630" :poster="poster" :qualityList="qualityList" :src="src" @qualityChange="onQualityChange" />
</template>

<script setup lang="ts">
    import { VideoPlayer } from '@fibrous/semi-ui-vue';

    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: '片尾' },
    ];
</script>

<template>
    <VideoPlayer :height="630" :markers="markers" :poster="poster" :src="src" />
</template>

<script setup lang="ts">
    import { VideoPlayer } from '@fibrous/semi-ui-vue';

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

<template>
    <VideoPlayer :height="630" :poster="poster" :src="src" theme="light" />
</template>

<script setup lang="ts">
    import { useTemplateRef } from 'vue';
    import { Button, VideoPlayer } from '@fibrous/semi-ui-vue';

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

    const player1 = useTemplateRef('player1');
    const player2 = useTemplateRef('player2');

    function handlePlayAll() {
        void player1.value?.video?.play();
        void player2.value?.video?.play();
    }

    function handlePauseAll() {
        player1.value?.video?.pause();
        player2.value?.video?.pause();
    }
</script>

<template>
    <div>
        <div :style="{ marginBottom: '12px' }">
            <Button :style="{ marginRight: '8px' }" @click="handlePlayAll">同时播放</Button>
            <Button @click="handlePauseAll">同时暂停</Button>
        </div>
        <div :style="{ display: 'flex', gap: '12px' }">
            <VideoPlayer ref="player1" :height="315" :poster="poster" :src="src" width="50%" />
            <VideoPlayer ref="player2" :height="315" :poster="poster" :src="src" width="50%" />
        </div>
    </div>
</template>