tiptap 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 嵌入。如果你使用 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 嵌入中支持有限。要循环单个视频,请将 loop 参数值设置为 true
,并将 playlist 参数值设置为已经在 Player 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 标志。请注意,当用户的鼠标悬停在播放器上时,暂停的视频右上角仍会显示一个小型 YouTube 文本标签
默认值: false
Youtube.configure({
modestBranding: true,
});
progressBarColor
此参数指定将用于播放器视频进度条的颜色。注意,将 color 参数设置为 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 音乐链接 | |
width | 嵌入宽度(覆盖默认选项,可选) | ✅ |
height | 嵌入高度(覆盖默认选项,可选) | ✅ |