Twitch 扩展

此扩展为编辑器添加了嵌入 Twitch 视频、剪辑和直播频道的支持。

Interactive Demo

Due to Twitch’s security policies for embedded players, this interactive demo must be opened in its own window.

Open Demo

支持的内容类型

视频：指向 Twitch 视频点播 (VOD) 的直接链接
剪辑：指向 Twitch 剪辑的链接
频道：指向 Twitch 直播频道的链接

安装

npm install @tiptap/extension-twitch

配置项

inline

控制节点是以内联方式处理还是块级处理。

默认值：false

Twitch.configure({
  inline: false,
})

width

控制嵌入视频的默认宽度。

默认值：640

Twitch.configure({
  width: 480,
})

height

控制嵌入视频的默认高度。

默认值：480

Twitch.configure({
  height: 320,
})

allowFullscreen

允许 iframe 以全屏模式播放。

默认值：true

Twitch.configure({
  allowFullscreen: false,
})

autoplay

允许 iframe 在播放器加载后自动播放。

默认值：false

Twitch.configure({
  autoplay: true,
})

muted

指定视频初始状态是否静音。当启用自动播放时，此项非常有用，因为大多数浏览器要求视频静音才能自动播放。

默认值：false

Twitch.configure({
  muted: true,
})

time

视频开始播放的时间。仅适用于视频嵌入，不适用于剪辑或频道。格式：1h2m3s（小时、分钟、秒）。

默认值：undefined

Twitch.configure({
  time: '1h2m3s',
})

parent

指定嵌入 Twitch 播放器的域名。此配置项对 Twitch 嵌入的正常工作必不可少，需设置为您的域名。

默认值：'localhost'

Twitch.configure({
  parent: 'example.com',
})

addPasteHandler

控制是否添加对 Twitch 视频 URL 的粘贴处理器。启用后，粘贴 Twitch 视频 URL 会自动创建嵌入。

默认值：true

Twitch.configure({
  addPasteHandler: false,
})

HTMLAttributes

向 iframe 元素传递自定义 HTML 属性。

默认值：{}

Twitch.configure({
  HTMLAttributes: {
    class: 'custom-twitch-embed',
  },
})

命令

setTwitchVideo(options)

在当前位置插入一个 Twitch 视频 iframe 嵌入。

editor.commands.setTwitchVideo({
  src: 'https://www.twitch.tv/videos/1234567890',
  width: 640,
  height: 480,
})

参数

src - Twitch 视频的 URL（可选）
width - 嵌入宽度（覆盖默认配置）（可选）
height - 嵌入高度（覆盖默认配置）（可选）

使用示例

基本用法

import { useEditor, EditorContent } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { Twitch } from '@tiptap/extension-twitch'

const editor = useEditor({
  extensions: [
    StarterKit,
    Twitch.configure({
      parent: 'example.com',
    }),
  ],
  content: '<p>Hello World!</p>',
})

自定义配置示例

const editor = useEditor({
  extensions: [
    StarterKit,
    Twitch.configure({
      parent: 'example.com',
      width: 800,
      height: 600,
      allowFullscreen: true,
      autoplay: false,
      addPasteHandler: true,
    }),
  ],
})

编程式插入

// 使用默认尺寸插入 Twitch 视频
editor.commands.setTwitchVideo({
  src: 'https://www.twitch.tv/videos/1234567890',
})

// 使用自定义尺寸插入
editor.commands.setTwitchVideo({
  src: 'https://www.twitch.tv/videos/1234567890',
  width: 960,
  height: 540,
})

// 带自定义自动播放及静音设置插入
editor.commands.setTwitchVideo({
  src: 'https://www.twitch.tv/videos/1234567890',
  autoplay: true,
  muted: true,
})

// 带开始时间插入
editor.commands.setTwitchVideo({
  src: 'https://www.twitch.tv/videos/1234567890',
  time: '1h2m3s',
})

属性覆盖

您可以在插入视频时指定属性来覆盖扩展默认选项，这样可以为不同的嵌入设置不同的参数，扩展配置仍作为默认值：

// 扩展默认配置为 autoplay=false
Twitch.configure({
  parent: 'example.com',
  autoplay: false,
})

// 但这次插入的视频启用自动播放
editor.commands.setTwitchVideo({
  src: 'https://www.twitch.tv/videos/1234567890',
  autoplay: true, // 覆盖扩展的自动播放选项
  muted: true, // 确保静音
})

支持的 URL 格式

扩展支持以下 Twitch URL 格式：

视频

https://www.twitch.tv/videos/1234567890
https://twitch.tv/videos/1234567890

剪辑

https://www.twitch.tv/examplechannel/clip/ExampleClipName-ABC123
https://twitch.tv/examplechannel/clip/ExampleClipName-ABC123
https://clips.twitch.tv/ExampleClipName-ABC123
https://www.clips.twitch.tv/ExampleClipName-ABC123

频道

https://www.twitch.tv/examplechannel
https://twitch.tv/examplechannel

粘贴支持

当启用 addPasteHandler（默认启用）时，您只需在编辑器中粘贴 Twitch 视频 URL，便会自动转换为嵌入。

粘贴此链接：https://www.twitch.tv/videos/1234567890
↓
自动创建一个 Twitch 嵌入节点

重要说明

必须配置 parent 域名，Twitch 嵌入才能正确显示。请确保设置为您的实际域名。
由于安全原因，Twitch 嵌入要求父域名在 Twitch 侧被白名单认可。
扩展会在创建嵌入前验证 URL，以防止无效内容。
嵌入节点可拖拽，支持在文档中重新定位。

键盘快捷键

选中 Twitch 嵌入时，按 Backspace 或 Delete 可删除嵌入
可通过键盘导航和方向键选中 Twitch 嵌入

源码

packages/extension-twitch/

Previously文本

Next upYouTube 视频