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,
});

参数

源代码

packages/extension-youtube/

使用示例

https://embed.tiptap.dev/preview/Nodes/YouTube