YouTube 播放器
YouTube 是一个视频托管平台，允许您上传和分享视频。
Nuxt 脚本提供了一个 useScriptYouTubePlayer 可组合函数和一个无头 ScriptYouTubePlayer 组件来与 YouTube 播放器交互。
ScriptYouTubePlayer
ScriptYouTubePlayer 组件是 useScriptYouTubePlayer 可组合函数的包装器。它提供了一种简单的方法，可以在您的 Nuxt 应用中嵌入 YouTube 视频。
它通过利用 元素事件触发器 来优化性能，只有在特定元素事件发生时才加载 YouTube 播放器。
默认情况下，它将在 mousedown 事件上加载。
演示
点击加载
属性
ScriptYouTubePlayer 组件接受以下属性
trigger: 加载 YouTube 播放器的触发事件。默认值为mousedown。有关更多信息，请参阅 元素事件触发器。placeholderAttrs: 占位符图像的属性。默认值为{ loading: 'lazy' }。aboveTheFold: 为以上方内容优化占位符图像。默认值为false。
来自 YouTube IFrame Player API 的所有脚本选项都支持 playerVars 属性，请查阅 支持的参数 以获取完整文档。
export interface YouTubeProps {
// YouTube Player
videoId: string
playerVars?: YT.PlayerVars
width?: number
height?: number
}
急切加载占位符
YouTube 播放器占位符图像默认情况下是延迟加载的。如果您的视频位于上方，您应该更改此行为，或者考虑使用 #placeholder 插槽来自定义占位符图像。
<ScriptYouTubePlayer above-the-fold />
组件 API
有关完整属性、事件和插槽，请参阅 外观组件 API。
事件
ScriptYouTubePlayer 组件发出来自 YouTube Player SDK 的所有事件。有关完整文档，请参阅 播放器事件。
const emits = defineEmits<{
'ready': [e: YT.PlayerEvent]
'state-change': [e: YT.OnStateChangeEvent, target: YT.Player]
'playback-quality-change': [e: YT.OnPlaybackQualityChangeEvent, target: YT.Player]
'playback-rate-change': [e: YT.OnPlaybackRateChangeEvent, target: YT.Player]
'error': [e: YT.OnErrorEvent, target: YT.Player]
}>()
插槽
由于该组件是无头提供的，因此您可以使用许多插槽来根据自己的喜好自定义播放器，然后再加载它。
default
默认插槽用于显示始终可见的内容。
<template>
<ScriptYouTubePlayer video-id="d_IFKP1Ofq0">
<div class="bg-blue-500 text-white p-5">
Video by Nuxt
</div>
</ScriptYouTubePlayer>
</template>
awaitingLoad
该插槽用于在视频加载时显示内容。
<template>
<ScriptYouTubePlayer video-id="d_IFKP1Ofq0">
<template #awaitingLoad>
<div class="bg-blue-500 text-white p-5">
Click to play!
</div>
</template>
</ScriptYouTubePlayer>
</template>
loading
该插槽用于在视频加载时显示内容。
<template>
<ScriptYouTubePlayer video-id="d_IFKP1Ofq0">
<template #loading>
<div class="bg-blue-500 text-white p-5">
Loading...
</div>
</template>
</ScriptYouTubePlayer>
</template>
placeholder
该插槽用于在视频加载之前显示占位符图像。默认情况下，这将显示视频的 YouTube 缩略图。您可以根据自己的喜好显示它。
<template>
<ScriptYouTubePlayer video-id="d_IFKP1Ofq0">
<template #placeholder="{ placeholder }">
<img :src="placeholder" alt="Video Placeholder">
</template>
</ScriptYouTubePlayer>
</template>
useScriptYouTubePlayer
useScriptYouTubePlayer 可组合函数可以让您对 YouTube Player SDK 进行精细控制。它提供了一种加载 YouTube Player SDK 并以编程方式与之交互的方法。
export function useScriptYouTubePlayer<T extends YouTubePlayerApi>(_options?: YouTubePlayerInput) {}
请按照 注册表脚本 指南了解有关高级用法的更多信息。
YouTubePlayerApi
/// <reference types="youtube" />
export interface YouTubePlayerApi {
YT: typeof YT
}
示例
加载 YouTube Player SDK 并以编程方式与之交互。
<script setup lang="ts">
const video = ref()
const { onLoaded } = useScriptYouTubePlayer()
const player = ref(null)
onLoaded(async ({ YT }) => {
// we need to wait for the internal YouTube APIs to be ready
const YouTube = await YT
await new Promise<void>((resolve) => {
if (typeof YT.Player === 'undefined')
YouTube.ready(resolve)
else
resolve()
})
// load the API
player.value = new YT.Player(video.value, {
videoId: 'd_IFKP1Ofq0'
})
})
function play() {
player.value?.playVideo()
}
</script>
<template>
<div>
<div ref="video" />
<button @click="play">
Play
</button>
</div>
</template>