useMediaControls
audio
和 video
元素的反应式媒体控件
¥Reactive media controls for both audio
and video
elements
示例
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
vue
<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',
})
// 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...
你可以在 useMediaControls
函数的 tracks
选项中提供字幕、副标题等。该函数将返回一个轨道数组以及两个用于控制它们的函数:enableTrack
、disableTrack
和 selectedTrack
。使用这些你可以管理当前选定的曲目。如果没有选定的曲目,selectedTrack
将是 -1
。
¥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.
vue
<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>