VIDEO

Inline Video Uploads!

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.

First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block type three back ticks. A code block should appear. Copy this code and paste it into the child code block in your graph:

var existing = document.getElementById("roamjs-video");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/video.js";
  extension.id = "roamjs-video";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Finally, click "Yes, I Know What I'm Doing".


Usage

Simply drag an .mp4 file into Roam. Natively, Roam tries to render this as an image and it appears blank. With this extension installed, the video is rendered correctly!

Youtube Timestamps

Roam natively supports embedding youtube videos with the {{[[video]]: link}} block. When you embed a youtube link with the video extension installed, two icons will appear on the top right corner.

  • The first is a marker icon. Clicking this marker will add and save timestamps. You could also use these timestamps to jump to certain points in the video. The second icon allows you to copy a link to the video that will play at that timestamp.
  • The secons is a loop icon. Clicking this icon a first time will add a timestamp just like above. Clicking it a second time will add a second timestamp in the same block that could be used for looping. Pressing play on that block will play the video in a loop.

Feel free to record notes and add labels after the number for each timestamp or as child blocks.


Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right.

If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

A special thanks to those who's contributions also helped make this extension possible:

Guo Miin Fang
Guo Miin Fang
💵

Other Extensions