useMediaControls ​
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 ​
Contributors ​
Changelog ​
v10.2.0
on 6/16/2023v10.1.0
on 4/22/2023v10.0.0-beta.5
on 4/13/2023cb644
- refactor!: remove isFunction
and isString
utilsv10.0.0-beta.4
on 4/13/20234d757
- feat(types)!: rename MaybeComputedRef
to MaybeRefOrGetter
0a72b
- feat(toValue): rename resolveUnref
to toValue
v9.12.0
on 1/29/2023v8.9.1
on 7/8/2022