Skip to content

useMediaControls ​

Category
Export Size
2.41 kB
Last Changed
5 months ago

Reactive media controls for both audio and video elements

Demo ​

00:00
00:00 / 00:00
Off
Loop
2x
1x
currentTime: 0
duration: 0
waiting: false
seeking: false
ended: false
stalled: false
buffered: []
playing: false
rate: 1
volume: 1
muted: false
tracks: []
selectedTrack: -1
isPictureInPicture: false

Usage ​

Basic Usage ​

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

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

// Change initial media properties
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>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useMediaControls } from '@vueuse/core'

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

// Change initial media properties
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>

Providing Captions, Subtitles, etc... ​

You can provide captions, subtitles, etc in the tracks options of the useMediaControls function. The function will return an array of tracks along with two functions for controlling them, enableTrack, disableTrack, and selectedTrack. Using these you can manage the currently selected track. selectedTrack will be -1 if there is no selected track.

html

<script setup lang="ts">
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>

<script setup lang="ts">
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>

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Alex Kozack
wheat
Fernando Fernández
Justin Halsall
webfansplz
丶远方
Bryce
CommanderRoot
jelf
rimday
Shinigami

Changelog ​

v10.2.0 on 6/16/2023
0b253 - fix: better representation for "waiting" value (#3072)
v10.1.0 on 4/22/2023
b20aa - fix: apply state when target ref changes (#2999)
v10.0.0-beta.5 on 4/13/2023
cb644 - refactor!: remove isFunction and isString utils
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v9.12.0 on 1/29/2023
4ef27 - fix: ended status not updating (#2680)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)

Released under the MIT License.