Youtube 扩展
此扩展为编辑器添加了一个新的 YouTube 嵌入节点。
安装
npm install @tiptap/extension-youtube设置
inline
控制节点是作为行内还是块处理。
默认: false
Youtube.configure({
inline: false,
})width
控制添加视频的默认宽度
默认: 640
Youtube.configure({
width: 480,
})height
控制添加视频的默认高度
默认: 480
Youtube.configure({
height: 320,
})controls
启用或禁用 YouTube 视频控制
默认: true
Youtube.configure({
controls: false,
})nocookie
启用 YouTube 嵌入的 nocookie 模式
默认: false
Youtube.configure({
nocookie: true,
})allowFullscreen
允许 iframe 以全屏模式播放
默认: true
Youtube.configure({
allowFullscreen: false,
})autoplay
允许 iframe 在播放器加载后自动播放
默认: false
Youtube.configure({
autoplay: true,
})ccLanguage
指定播放器将用于显示字幕的默认语言。将参数的值设置为 ISO 639-1 两个字母的语言代码。例如，将其设置为 es 将导致字幕为西班牙语。
默认: undefined
Youtube.configure({
ccLanguage: 'es',
})ccLoadPolicy
将此参数的值设置为 true 会导致默认显示字幕，即便用户已关闭字幕。
默认: false
Youtube.configure({
ccLoadPolicy: true,
})disableKBcontrols
禁用 iframe 播放器的键盘控制
默认: false
Youtube.configure({
disableKBcontrols: true,
})enableIFrameApi
允许通过 IFrame Player API 调用控制播放器
默认: false
Youtube.configure({
enableIFrameApi: true,
})origin
该参数为 IFrame API 提供了额外的安全措施，仅支持 IFrame 嵌入。如果您正在使用 IFrame API，这意味着您将 enableIFrameApi 参数的值设置为 true，您应始终将您的域指定为 origin 参数的值。
默认: ''
Youtube.configure({
origin: 'yourdomain.com',
})endTime
该参数指定播放器在视频开始后的秒数时应停止播放视频。
例如，将其设置为 15 将使视频在 15 秒处停止。
默认: 0
Youtube.configure({
endTime: '15',
})interfaceLanguage
设置播放器的界面语言。参数值为 ISO 639-1 两个字母的语言代码。例如，将其设置为 fr 将使界面为法语。
默认: undefined
Youtube.configure({
interfaceLanguage: 'fr',
})ivLoadPolicy
将其设置为 1 会导致默认显示视频注释，而设置为 3 会导致默认不显示视频注释。
默认: 0
Youtube.configure({
ivLoadPolicy: '3',
})loop
该参数在 IFrame 嵌入中支持有限。要循环播放单个视频，请将循环参数值设置为 true，并将播放列表参数值设置为在播放器 API URL 中指定的同一视频 ID。
默认: false
Youtube.configure({
loop: true,
})playlist
该参数指定要播放的视频 ID 的以逗号分隔的列表。
默认: ''
Youtube.configure({
playlist: 'VIDEO_ID_1,VIDEO_ID_2,VIDEO_ID_3,...,VIDEO_ID_N',
})modestBranding
禁用播放器控制栏上的 YouTube logo。请注意，当用户的鼠标指针悬停在播放器上时，暂停视频的右上角仍会显示小的 YouTube 文本标签。
默认: false
Youtube.configure({
modestBranding: true,
})progressBarColor
该参数指定播放器视频进度条中使用的颜色。请注意，将颜色参数设置为 white 将禁用 modestBranding 参数。
默认: undefined
Youtube.configure({
progressBarColor: 'white',
})命令
setYoutubeVideo(options)
在当前位置插入一个 YouTube iframe 嵌入
editor.commands.setYoutubeVideo({
src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
width: 640,
height: 480,
})选项
| 选项 | 描述 | 可选 |
|---|---|---|
| src | YouTube 视频的 URL。可以是 YouTube 或 YouTube Music 链接 | |
| width | 嵌入的宽度（覆盖默认选项，可选） | ✅ |
| height | 嵌入的高度（覆盖默认选项，可选） | ✅ |