VideoPlayer 视频播放器

import { VideoPlayer } from "@reglow/reui";

<script setup>
import { VideoPlayer } from "@reglow/reui";

const src = "https://example.com/video.mp4";
const poster = "https://example.com/poster.jpg";
</script>

<template>
  <VideoPlayer
    :src="src"
    :poster="poster"
    :height="360"
    class="w-full"
  />
</template>

<script setup>
const controlsList = ['play', 'time', 'volume', 'playbackRate', 'fullscreen'];
</script>

<template>
  <VideoPlayer
    :src="src"
    :poster="poster"
    :height="360"
    :controls-list="controlsList"
    class="w-full"
  />
</template>

<script setup>
const playbackRateList = [
  { label: "0.5x", value: 0.5 },
  { label: "1.0x", value: 1 },
  { label: "1.5x", value: 1.5 },
  { label: "2.0x", value: 2 },
];
</script>

<template>
  <VideoPlayer
    :src="src"
    :poster="poster"
    :height="360"
    :playback-rate-list="playbackRateList"
    class="w-full"
  />
</template>

<template>
  <VideoPlayer :src="src" :poster="poster" :height="360" :volume="50" muted class="w-full" />
</template>

<script setup>
import { ref } from "vue";

const currentSrc = ref("https://example.com/video-1080p.mp4");
const qualityList = [
  { label: "1080p", value: "1080p" },
  { label: "720p", value: "720p" },
  { label: "480p", value: "480p" },
];

const onQualityChange = (quality) => {
  currentSrc.value = `https://example.com/video-${quality}.mp4`;
};
</script>

<template>
  <VideoPlayer
    :src="currentSrc"
    :poster="poster"
    :height="360"
    :quality-list="qualityList"
    default-quality="1080p"
    @quality-change="onQualityChange"
    class="w-full"
  />
</template>

<script setup>
const markers = [
  { start: 0, title: "片头" },
  { start: 4, title: "功能介绍" },
  { start: 38, title: "Figma Plugin" },
  { start: 51, title: "片尾" },
];
</script>

<template>
  <VideoPlayer
    :src="src"
    :poster="poster"
    :height="360"
    :markers="markers"
    class="w-full"
  />
</template>

<script setup>
import { ref } from "vue";
import { VideoPlayer } from "@reglow/reui";

const playerRef = ref();

const playAll = () => playerRef.value?.play();
const pauseAll = () => playerRef.value?.pause();
const seek = (time) => playerRef.value?.seek(time);
</script>

<template>
  <VideoPlayer ref="playerRef" :src="src" :height="360" class="w-full" />
  <div class="flex gap-2 mt-2">
    <Button @click="playAll">播放</Button>
    <Button @click="pauseAll">暂停</Button>
    <Button @click="seek(30)">跳转到 30s</Button>
  </div>
</template>

<template>
  <VideoPlayer
    :src="src"
    :poster="poster"
    :height="360"
    theme="light"
    captions-src="/subtitle.vtt"
    class="w-full"
  />
</template>