Canvas Bili Player

Canvas Bili Player

English | 中文

Drop a Bilibili link onto an Obsidian Canvas and it becomes a real video player node — sized 16:9 and labelled with the actual video title — instead of a cramped 400×400 frame captioned "External Player - 哔哩哔哩弹幕网嵌入式播放器".

The problem

Obsidian's Canvas treats every URL as a generic web page. For a Bilibili video that means:

What it does

• Rewrites the URL to Bilibili's official embed player, so you get a clean player instead of the full site with its overlay UI
• Fits the node to 16:9, preserving any width you already enlarged past 480 px and only enforcing the ratio
• Fetches the real video title from Bilibili's public API and writes it into the node label
• Caches titles on disk, so reopening Obsidian does not query the network again
• Keeps the label visible — Canvas shows link labels on hover only; this plugin pins them on
• Works retroactively — links already sitting in your canvas get fixed too

Usage

Conversion is automatic: paste a link, drag one in from the browser, or use Add web page. The URL and size are rewritten before the node is created, so the original page never loads first.

Two commands are also available (Command palette → search for B站嵌入):

Command names are currently in Chinese.

Under the hood

Two Obsidian internals make this less trivial than it looks, and both are handled:

• CanvasNode.moveAndResize does not fill in omitted arguments. Calling it with only { width, height } writes NaN into x/y, which poisons the canvas' rbush spatial index — afterwards nodes stop rendering and can no longer be dragged. This plugin always supplies all four values, or uses resize() (which fills them in internally).
• The node label is written by Obsidian itself, through updateNodeLabel, triggered by setFrameUrl() and by the webview's page-title-updated event. The embed player reports its own title, which would overwrite the real one. Rather than racing that event, the plugin intercepts the label on its way out and substitutes the cached title.

The label interception is installed as soon as a canvas is opened, not only when a node is created — otherwise reopening an existing canvas would get every title clobbered.

Network access and privacy

The plugin talks to Bilibili, because there is no other way to obtain a video title:

Fetched titles are stored in the plugin's own data.json under .obsidian/plugins/bili-embed/. Nothing apart from the bvid being looked up is sent anywhere. No analytics, no other requests.

If the API rate-limits you, or a video is region/copyright restricted, no title is cached — the node label falls back to the URL, which is Obsidian's own default for link nodes.

Notes and limitations

• Desktop in practice. Canvas web-link nodes do not render on mobile, so the plugin is not useful there (it still loads without error).
• It relies on undocumented Obsidian internals (canvas.createLinkNode, and the link node's setUrl / updateNodeLabel). A future Obsidian release could change them. The plugin fails safe: if a patch cannot be applied, links are simply left untouched.
• Sizes are only forced when you ask. Automatic conversion deliberately leaves node geometry alone, so it never fights your manual layout.
• Recognises bilibili.com/video/BV…, m.bilibili.com/…, and already-converted player.bilibili.com links. Part information (?p=2) is preserved.

Installation

Until the plugin is listed in the community directory, install manually:

1. Download main.js and manifest.json from the latest release
2. Place them in <your vault>/.obsidian/plugins/bili-embed/
3. Restart Obsidian, then enable Canvas Bili Player under Settings → Community plugins

Or install via BRAT using this repository's URL.

Development

No build step — main.js is the source. Edit it, then reload the plugin.

License

MIT — see LICENSE.