useMediaControls
audio 和 video 元素的响应式媒体控件
演示
00:00
00:00 / 00:00
关闭
循环
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
用法
基本用法
vue
<script setup lang="ts">
import { useMediaControls } from '@vueuse/core'
import { onMounted, ref } from 'vue'
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>提供字幕、旁白等...
您可以在 useMediaControls 函数的 tracks 选项中提供字幕、旁白等。该函数将返回一个轨道数组，以及两个用于控制它们的函数，enableTrack、disableTrack 和 selectedTrack。使用这些函数，您可以管理当前选择的轨道。selectedTrack 将在没有选择的轨道时为 -1。
vue
<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>类型声明
显示类型声明
typescript
/**
* Many of the jsdoc definitions here are modified version of the
* documentation from MDN(https://mdn.org.cn/en-US/docs/Web/API/HTMLMediaElement)
*/
export interface UseMediaSource {
/**
* The source url for the media
*/
src: string
/**
* The media codec type
*/
type?: string
}
export interface UseMediaTextTrackSource {
/**
* Indicates that the track should be enabled unless the user's preferences indicate
* that another track is more appropriate
*/
default?: boolean
/**
* How the text track is meant to be used. If omitted the default kind is subtitles.
*/
kind: TextTrackKind
/**
* A user-readable title of the text track which is used by the browser
* when listing available text tracks.
*/
label: string
/**
* Address of the track (.vtt file). Must be a valid URL. This attribute
* must be specified and its URL value must have the same origin as the document
*/
src: string
/**
* Language of the track text data. It must be a valid BCP 47 language tag.
* If the kind attribute is set to subtitles, then srclang must be defined.
*/
srcLang: string
}
interface UseMediaControlsOptions extends ConfigurableDocument {
/**
* The source for the media, may either be a string, a `UseMediaSource` object, or a list
* of `UseMediaSource` objects.
*/
src?: MaybeRefOrGetter<string | UseMediaSource | UseMediaSource[]>
/**
* A list of text tracks for the media
*/
tracks?: MaybeRefOrGetter<UseMediaTextTrackSource[]>
}
export interface UseMediaTextTrack {
/**
* The index of the text track
*/
id: number
/**
* The text track label
*/
label: string
/**
* Language of the track text data. It must be a valid BCP 47 language tag.
* If the kind attribute is set to subtitles, then srclang must be defined.
*/
language: string
/**
* Specifies the display mode of the text track, either `disabled`,
* `hidden`, or `showing`
*/
mode: TextTrackMode
/**
* How the text track is meant to be used. If omitted the default kind is subtitles.
*/
kind: TextTrackKind
/**
* Indicates the track's in-band metadata track dispatch type.
*/
inBandMetadataTrackDispatchType: string
/**
* A list of text track cues
*/
cues: TextTrackCueList | null
/**
* A list of active text track cues
*/
activeCues: TextTrackCueList | null
}
export declare function useMediaControls(
target: MaybeRef<HTMLMediaElement | null | undefined>,
options?: UseMediaControlsOptions,
): {
currentTime: Ref<number, number>
duration: Ref<number, number>
waiting: Ref<boolean, boolean>
seeking: Ref<boolean, boolean>
ended: Ref<boolean, boolean>
stalled: Ref<boolean, boolean>
buffered: Ref<[number, number][], [number, number][]>
playing: Ref<boolean, boolean>
rate: Ref<number, number>
volume: Ref<number, number>
muted: Ref<boolean, boolean>
tracks: Ref<
{
id: number
label: string
language: string
mode: TextTrackMode
kind: TextTrackKind
inBandMetadataTrackDispatchType: string
cues: {
[x: number]: {
endTime: number
id: string
onenter: ((this: TextTrackCue, ev: Event) => any) | null
onexit: ((this: TextTrackCue, ev: Event) => any) | null
pauseOnExit: boolean
startTime: number
readonly track: {
readonly activeCues: any | null
readonly cues: any | null
readonly id: string
readonly inBandMetadataTrackDispatchType: string
readonly kind: TextTrackKind
readonly label: string
readonly language: string
mode: TextTrackMode
oncuechange: ((this: TextTrack, ev: Event) => any) | null
addCue: (cue: TextTrackCue) => void
removeCue: (cue: TextTrackCue) => void
addEventListener: {
<K extends keyof TextTrackEventMap>(
type: K,
listener: (this: TextTrack, ev: TextTrackEventMap[K]) => any,
options?: boolean | AddEventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions,
): void
}
removeEventListener: {
<K extends keyof TextTrackEventMap>(
type: K,
listener: (this: TextTrack, ev: TextTrackEventMap[K]) => any,
options?: boolean | EventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | EventListenerOptions,
): void
}
dispatchEvent: {
(event: Event): boolean
(event: Event): boolean
}
} | null
addEventListener: {
<K extends keyof TextTrackCueEventMap>(
type: K,
listener: (
this: TextTrackCue,
ev: TextTrackCueEventMap[K],
) => any,
options?: boolean | AddEventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions,
): void
}
removeEventListener: {
<K extends keyof TextTrackCueEventMap>(
type: K,
listener: (
this: TextTrackCue,
ev: TextTrackCueEventMap[K],
) => any,
options?: boolean | EventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | EventListenerOptions,
): void
}
dispatchEvent: {
(event: Event): boolean
(event: Event): boolean
}
}
readonly length: number
getCueById: (id: string) => TextTrackCue | null
[Symbol.iterator]: () => ArrayIterator<TextTrackCue>
} | null
activeCues: {
[x: number]: {
endTime: number
id: string
onenter: ((this: TextTrackCue, ev: Event) => any) | null
onexit: ((this: TextTrackCue, ev: Event) => any) | null
pauseOnExit: boolean
startTime: number
readonly track: {
readonly activeCues: any | null
readonly cues: any | null
readonly id: string
readonly inBandMetadataTrackDispatchType: string
readonly kind: TextTrackKind
readonly label: string
readonly language: string
mode: TextTrackMode
oncuechange: ((this: TextTrack, ev: Event) => any) | null
addCue: (cue: TextTrackCue) => void
removeCue: (cue: TextTrackCue) => void
addEventListener: {
<K extends keyof TextTrackEventMap>(
type: K,
listener: (this: TextTrack, ev: TextTrackEventMap[K]) => any,
options?: boolean | AddEventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions,
): void
}
removeEventListener: {
<K extends keyof TextTrackEventMap>(
type: K,
listener: (this: TextTrack, ev: TextTrackEventMap[K]) => any,
options?: boolean | EventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | EventListenerOptions,
): void
}
dispatchEvent: {
(event: Event): boolean
(event: Event): boolean
}
} | null
addEventListener: {
<K extends keyof TextTrackCueEventMap>(
type: K,
listener: (
this: TextTrackCue,
ev: TextTrackCueEventMap[K],
) => any,
options?: boolean | AddEventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions,
): void
}
removeEventListener: {
<K extends keyof TextTrackCueEventMap>(
type: K,
listener: (
this: TextTrackCue,
ev: TextTrackCueEventMap[K],
) => any,
options?: boolean | EventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | EventListenerOptions,
): void
}
dispatchEvent: {
(event: Event): boolean
(event: Event): boolean
}
}
readonly length: number
getCueById: (id: string) => TextTrackCue | null
[Symbol.iterator]: () => ArrayIterator<TextTrackCue>
} | null
}[],
| UseMediaTextTrack[]
| {
id: number
label: string
language: string
mode: TextTrackMode
kind: TextTrackKind
inBandMetadataTrackDispatchType: string
cues: {
[x: number]: {
endTime: number
id: string
onenter: ((this: TextTrackCue, ev: Event) => any) | null
onexit: ((this: TextTrackCue, ev: Event) => any) | null
pauseOnExit: boolean
startTime: number
readonly track: {
readonly activeCues: any | null
readonly cues: any | null
readonly id: string
readonly inBandMetadataTrackDispatchType: string
readonly kind: TextTrackKind
readonly label: string
readonly language: string
mode: TextTrackMode
oncuechange: ((this: TextTrack, ev: Event) => any) | null
addCue: (cue: TextTrackCue) => void
removeCue: (cue: TextTrackCue) => void
addEventListener: {
<K extends keyof TextTrackEventMap>(
type: K,
listener: (this: TextTrack, ev: TextTrackEventMap[K]) => any,
options?: boolean | AddEventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions,
): void
}
removeEventListener: {
<K extends keyof TextTrackEventMap>(
type: K,
listener: (this: TextTrack, ev: TextTrackEventMap[K]) => any,
options?: boolean | EventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | EventListenerOptions,
): void
}
dispatchEvent: {
(event: Event): boolean
(event: Event): boolean
}
} | null
addEventListener: {
<K extends keyof TextTrackCueEventMap>(
type: K,
listener: (
this: TextTrackCue,
ev: TextTrackCueEventMap[K],
) => any,
options?: boolean | AddEventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions,
): void
}
removeEventListener: {
<K extends keyof TextTrackCueEventMap>(
type: K,
listener: (
this: TextTrackCue,
ev: TextTrackCueEventMap[K],
) => any,
options?: boolean | EventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | EventListenerOptions,
): void
}
dispatchEvent: {
(event: Event): boolean
(event: Event): boolean
}
}
readonly length: number
getCueById: (id: string) => TextTrackCue | null
[Symbol.iterator]: () => ArrayIterator<TextTrackCue>
} | null
activeCues: {
[x: number]: {
endTime: number
id: string
onenter: ((this: TextTrackCue, ev: Event) => any) | null
onexit: ((this: TextTrackCue, ev: Event) => any) | null
pauseOnExit: boolean
startTime: number
readonly track: {
readonly activeCues: any | null
readonly cues: any | null
readonly id: string
readonly inBandMetadataTrackDispatchType: string
readonly kind: TextTrackKind
readonly label: string
readonly language: string
mode: TextTrackMode
oncuechange: ((this: TextTrack, ev: Event) => any) | null
addCue: (cue: TextTrackCue) => void
removeCue: (cue: TextTrackCue) => void
addEventListener: {
<K extends keyof TextTrackEventMap>(
type: K,
listener: (this: TextTrack, ev: TextTrackEventMap[K]) => any,
options?: boolean | AddEventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions,
): void
}
removeEventListener: {
<K extends keyof TextTrackEventMap>(
type: K,
listener: (this: TextTrack, ev: TextTrackEventMap[K]) => any,
options?: boolean | EventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | EventListenerOptions,
): void
}
dispatchEvent: {
(event: Event): boolean
(event: Event): boolean
}
} | null
addEventListener: {
<K extends keyof TextTrackCueEventMap>(
type: K,
listener: (
this: TextTrackCue,
ev: TextTrackCueEventMap[K],
) => any,
options?: boolean | AddEventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions,
): void
}
removeEventListener: {
<K extends keyof TextTrackCueEventMap>(
type: K,
listener: (
this: TextTrackCue,
ev: TextTrackCueEventMap[K],
) => any,
options?: boolean | EventListenerOptions,
): void
(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | EventListenerOptions,
): void
}
dispatchEvent: {
(event: Event): boolean
(event: Event): boolean
}
}
readonly length: number
getCueById: (id: string) => TextTrackCue | null
[Symbol.iterator]: () => ArrayIterator<TextTrackCue>
} | null
}[]
>
selectedTrack: Ref<number, number>
enableTrack: (
track: number | UseMediaTextTrack,
disableTracks?: boolean,
) => void
disableTrack: (track?: number | UseMediaTextTrack) => void
supportsPictureInPicture: boolean | undefined
togglePictureInPicture: () => Promise<unknown>
isPictureInPicture: Ref<boolean, boolean>
onSourceError: EventHookOn<Event>
onPlaybackError: EventHookOn<Event>
}
export type UseMediaControlsReturn = ReturnType<typeof useMediaControls>来源
贡献者
Anthony Fu
Alex Kozack
wheat
Fernando Fernández
Anthony Fu
Justin Halsall
webfansplz
Darren
huiliangShen
丶远方
Bryce
CommanderRoot
jelf
rimday
Shinigami变更日志
v11.2.0 于 2024 年 10 月 30 日v10.10.0 于 2024 年 5 月 27 日v10.2.0 于 2023 年 6 月 16 日v10.1.0 于 2023 年 4 月 22 日v10.0.0-beta.5 于 2023 年 4 月 13 日cb644 - 重构!: 删除 isFunction 和 isString 实用程序v10.0.0-beta.4 于 2023 年 4 月 13 日4d757 - 功能(类型)!: 将 MaybeComputedRef 重命名为 MaybeRefOrGetter0a72b - 功能(toValue): 将 resolveUnref 重命名为 toValuev9.12.0 于 2023 年 1 月 29 日