Vimeo 播放器 · Nuxt 脚本

Vimeo 是一个视频托管平台，允许您上传和共享视频。

Nuxt 脚本提供了一个 useScriptVimeoPlayer 可组合函数和一个无头 ScriptVimeoPlayer 组件来与 Vimeo 播放器进行交互。

ScriptVimeoPlayer

ScriptVimeoPlayer 组件是 useScriptVimeoPlayer 可组合函数的包装器。它提供了一种简单的方法，可以在您的 Nuxt 应用中嵌入 Vimeo 视频。

它通过利用元素事件触发器来优化性能，只有在特定元素事件发生时才会加载 Vimeo 播放器。

默认情况下，它将在 mousedown 事件上加载。

演示

点击加载

点击视频将加载 Vimeo iframe 并开始播放视频。

道具

ScriptVimeoPlayer 组件接受以下道具

trigger: 加载 Vimeo 播放器的触发事件。默认值为 mousedown。有关更多信息，请参阅元素事件触发器。
aboveTheFold: 优化占位符图像以用于内容的顶部区域。默认值为 false。
rootAttrs: 覆盖自动设置的根属性。
placeholderAttrs: 占位符图像的属性。默认值为 { loading: 'lazy' }。
id: vimeoOptions.id 的简写形式。
url: vimeoOptions.url 的简写形式。
vimeoOptions: 支持 Player SDK 中的所有选项，请参阅嵌入选项以获取完整文档。

interface VimeoPlayerProps {
  id: number | undefined
  url?: string | undefined
  autopause?: boolean | undefined
  autoplay?: boolean | undefined
  background?: boolean | undefined
  byline?: boolean | undefined
  color?: string | undefined
  controls?: boolean | undefined
  dnt?: boolean | undefined
  height?: number | undefined
  interactive_params?: string | undefined
  keyboard?: boolean | undefined
  loop?: boolean | undefined
  maxheight?: number | undefined
  maxwidth?: number | undefined
  muted?: boolean | undefined
  pip?: boolean | undefined
  playsinline?: boolean | undefined
  portrait?: boolean | undefined
  responsive?: boolean | undefined
  speed?: boolean | undefined
  quality?: VimeoVideoQuality | undefined
  texttrack?: string | undefined
  title?: boolean | undefined
  transparent?: boolean | undefined
  width?: number | undefined
}

预加载占位符

Vimeo 视频占位符图像默认情况下是延迟加载的。如果您视频位于内容的顶部区域，则应更改此行为，或者考虑使用 #placeholder 插槽来自定义占位符图像。

<ScriptVimeoPlayer above-the-fold />

组件 API

有关完整道具、事件和插槽，请参阅外观组件 API。

事件

ScriptVimeoPlayer 组件会发出 Vimeo Player SDK 中的所有事件。有关完整文档，请参阅播放器事件。

const emits = defineEmits<{
  play: [e: EventMap['play'], player: Player]
  playing: [e: EventMap['playing'], player: Player]
  pause: [e: EventMap['pause'], player: Player]
  ended: [e: EventMap['ended'], player: Player]
  timeupdate: [e: EventMap['timeupdate'], player: Player]
  progress: [e: EventMap['progress'], player: Player]
  seeking: [e: EventMap['seeking'], player: Player]
  seeked: [e: EventMap['seeked'], player: Player]
  texttrackchange: [e: EventMap['texttrackchange'], player: Player]
  chapterchange: [e: EventMap['chapterchange'], player: Player]
  cuechange: [e: EventMap['cuechange'], player: Player]
  cuepoint: [e: EventMap['cuepoint'], player: Player]
  volumechange: [e: EventMap['volumechange'], player: Player]
  playbackratechange: [e: EventMap['playbackratechange'], player: Player]
  bufferstart: [e: EventMap['bufferstart'], player: Player]
  bufferend: [e: EventMap['bufferend'], player: Player]
  error: [e: EventMap['error'], player: Player]
  loaded: [e: EventMap['loaded'], player: Player]
  durationchange: [e: EventMap['durationchange'], player: Player]
  fullscreenchange: [e: EventMap['fullscreenchange'], player: Player]
  qualitychange: [e: EventMap['qualitychange'], player: Player]
  camerachange: [e: EventMap['camerachange'], player: Player]
  resize: [e: EventMap['resize'], player: Player]
  enterpictureinpicture: [e: EventMap['enterpictureinpicture'], player: Player]
  leavepictureinpicture: [e: EventMap['leavepictureinpicture'], player: Player]
}>()

插槽

由于该组件是无头的，因此您可以使用许多插槽来自定义播放器，无论您想要加载之前如何。

default

默认插槽用于显示始终可见的内容。

<template>
  <ScriptVimeoPlayer :id="331567154">
    <div class="bg-blue-500 text-white p-5">
      Video by NuxtJS
    </div>
  </ScriptVimeoPlayer>
</template>

awaitingLoad

该插槽用于在视频加载时显示内容。

<template>
  <ScriptVimeoPlayer :id="331567154">
    <template #awaitingLoad>
      <div class="bg-blue-500 text-white p-5">
        Click to play!
      </div>
    </template>
  </ScriptVimeoPlayer>
</template>

loading

该插槽用于在视频加载时显示内容。

<template>
  <ScriptVimeoPlayer :id="331567154">
    <template #loading>
      <div class="bg-blue-500 text-white p-5">
        Loading...
      </div>
    </template>
  </ScriptVimeoPlayer>
</template>

placeholder

该插槽用于在视频加载之前显示占位符图像。默认情况下，这将显示视频的 Vimeo 缩略图。您可以随意显示它。

<template>
  <ScriptVimeoPlayer :id="331567154">
    <template #placeholder="{ placeholder }">
      <img :src="placeholder" alt="Video Placeholder">
    </template>
  </ScriptVimeoPlayer>
</template>

useScriptVimeoPlayer

useScriptVimeoPlayer 可组合函数可以让您对 Vimeo Player SDK 进行精细控制。它提供了一种方法来加载 Vimeo Player SDK 并以编程方式与之交互。

export function useScriptVimeoPlayer<T extends VimeoPlayerApi>(_options?: VimeoPlayerInput) {}

有关高级用法的更多信息，请遵循注册表脚本指南。

VimeoPlayerApi

export interface VimeoPlayerApi {
  Vimeo: {
    Player: ScriptVimeoPlayer
  }
}

示例

加载 Vimeo Player SDK 并以编程方式与之交互。

<script setup lang="ts">
const video = ref()
const { onLoaded } = useScriptVimeoPlayer()

let player
onLoaded(({ Vimeo }) => {
  player = new Vimeo.Player(video.value, {
    id: 331567154
  })
})
</script>

<template>
  <div>
    <div ref="video" />
    <button @click="player.play()">
      Play
    </button>
  </div>
</template>

Google 地图

在您的 Nuxt 应用中显示性能优化的 Google 地图。

YouTube 播放器

在您的 Nuxt 应用中显示性能优化的 YouTube 视频。