useMediaControls

audio および video 要素のためのリアクティブなメディアコントロール

使用法

基本的な使用法

<script setup lang="ts">
import { useMediaControls } from '@vueuse/core'
import { onMounted, useTemplateRef } from 'vue'

const video = useTemplateRef('video')
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">
    再生 / 一時停止
  </button>
  <span>{{ currentTime }} / {{ duration }}</span>
</template>

キャプション、字幕などの提供

useMediaControls 関数の tracks オプションでキャプション、字幕などを提供できます。この関数はトラックの配列と、それらを制御するための2つの関数 enableTrack、disableTrack、および selectedTrack を返します。これらを使用して現在選択されているトラックを管理できます。selectedTrack は選択されたトラックがない場合 -1 になります。

<script setup lang="ts">
import { useMediaControls } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const video = useTemplateRef('video')
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>