VueUse useMediaControls 视频音频控制

VueUse useMediaControls 响应式的视频音频控制。

代码示例

<script setup>
import { onMounted, ref } from 'vue'
import { useMediaControls } from '@vueuse/core'

const video = ref()
const { playing, currentTime, duration, volume } = useMediaControls(video, { 
  src: 'video.mp4',
})

// 初始化媒体属性
onMounted(() => {
  volume.value = 0.5
  currentTime.value = 60
})
</script>
<template>
  <video ref="video" />
  <button @click="playing = !playing">Play / Pause</button>
  <span>{{ currentTime }} / {{ duration }}</span>
</template>

您可以在usemediacontrol函数的tracks选项中提供字幕、副标题等。该函数将返回一个轨道数组以及用于控制它们的两个函数:enableTrack、disableTrack和selectedTrack。使用这些，您可以管理当前选择的轨道。如果没有选择轨道，selectedTrack将为-1。

<script setup>
import { useMediaControls } from '@vueuse/core'
import { ref } from 'vue'
  const video = ref()
  const {
    tracks,
    enableTrack
  } = useMediaControls(video, {
    src: 'video.mp4',
    tracks: [
      {
        default: true,
        src: './subtitles.vtt',
        kind: 'subtitles',
        label: 'English',
        srcLang: 'en',
      },
    ]
  })
</script>

<template>
  <video ref="video" />
  <button v-for="track in tracks" :key="track.id" @click="enableTrack(track)">
    {{ track.label }}
  </button>
</template>