RemNote Html Player

rnhp

take notes in RemNote on an online video with the Html Player

plugin for RemNote (https://www.remnote.io/) with only read and create permissions

Project

  • this project is like rnyt, but it reads downloadable audio/video
  • the project is still in progress
  • it uses Glitch (https://glitch.com/)
  • you can’t use it like rnyt, read the “How to get your link” part

Description

  • create timestamps like chapters, add child notes with or without timestamps (6 levels max)
  • review your video notes later
  • jump to the timestamps with your mouse or your keyboard
  • control the player with shortcuts
  • set the default settings so you don’t have to do your settings again
  • modify your rems in RemNote

Difference between rnyt and rnhp

  • you can’t create a link with a timestamp, it writes text instead (example: 0:10 text)
  • it uses a custom Html player (not finished yet)
  • you have to be careful about the file format and filesize
  • you can use it for audio too

Quickstart

How to add the plugin?

How to use the plugin?

  1. copy paste your video link in RemNote
  2. go into the rem
  3. insert the plugin
  4. wait the play icon
  5. click on the video to start
  6. input a delay to rewind the video when you take a note

How to get your link

Online file with an extension

  • get a link like https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1920_18MG.mp4

Cloud storage

  • Dropbox is recommended. You may use Google Drive and Onedrive. Other cloud storage were not tested and are not supported.

  • On their website, select your file, then:

    • Dropbox: share this file > copy link

    • Google Drive: get link > copy link, and set “anyone with the link” for the title (optional), you are limited to 100 MB per file

    • OneDrive: copy the embed (iframe), create a rem, use the plugin and paste the iframe code, you can’t get a title for your file

  • Don’t set a time limit on your link.

Formats

  • the recommended formats are:

    • video: mp4, webm, mov
    • audio: mp3, flac, wav
  • avi can’t be read

Filesize

  • a big file could raise the loading time and interrupt the playing
  • the playback rate could be more limited
  • sometimes the storage is slower

How to change the default settings?

  1. you can skip and use these settings later
  2. go to the top-level rems
  3. go into RemNote HTML Player
    • dark_mode : 0 (or 1)
    • width: 65 (% value).
    • playback_speed: 1 (0.25, 0.5, …, 2, …, 16)
    • delay: 0 (seconds)

GitHub

5 Likes

Great work, as ever!

I’ve not looked into this myself, but is it possible to integrate this into the Clipper rather than RemNote itself? Or does the current API only allow for the main app?

You can only use the embed plugins in RemNote (Frontend) in desktop mode on the website or the application.

You can’t modify RemNote Clipper with the API, but you can make a Chrome extension. I’ve tried the 2 APIs. The Frontend API throws errors, but the Backend API works, and you have to give a key (RemNote).

The Plugin part in RemNote’s settings is only for the Frontend, you can set permissions, but with the Backend you can’t, except the folder. It is risky.

2 Likes

Update

  • more control for the player
  • bar position fixed

4 Likes

hello, i’m sorry but how do you use the plugin? is there a video tutorial for it? new to remnote and have never tried using plugins for remnote. I tried following the text instructions but it’s not working (i am obviously doing something wrong): it just creates a normal link, but no video shows up (unlike the gif in your post)

appreciate your advice pls! thank you v much!

Hello

Can you use the plugin with this link?
https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1920_18MG.mp4

What kind of link did you use?
What is the file size?
What is the file format?

If the play logo doesn’t appear, the video is not ready or can’t be downloaded. In most cases, to know if your link is good, your browser has to propose you save the file on your computer. The plugin doesn’t use a strict filter that covers every case. Some links are converted to be downloadable (like Dropbox, Google Drive, etc.). The plugin permits the users to use it as they want if the format is okay.

The video can take time to appear if your connection is slow and the file is big, but it is not very long. If the file is too big, the video will often suspend the playing. Some clouds can sometimes be slow; they are not multimedia servers. They are built to store, and they don’t need to be consistently fast. For example, I already had a speed issue with a free Google Drive account during my tests.

This plugin can’t fit the quality. You must use a video quality and size that works with the online storage and your connection. There is no server behind to store different videos with different qualities or compress your video.

Brilliant, thanks for doing this! Question, how do you change the playback speed? I don’t understand how to ‘go into RemNote HTML Player’ to change the settings. Cheers

1 Like

It is the rem for the settings. Top-level Rem > RemNote HTML Player

The shortcuts are missing in “Shortcuts”. I’ll fix it.

shift + , : slower
shift + . : faster

If you go faster, you can be limited by the connection speed. The max speed can go up to x16.

It doesn’t show mathematical formulas effectively, latex syntax “$$” will make the text blank, hopefully it can be fixed, thanks for the plugin, it’s useful, great!
image
image

LaTeX is not supported yet, but I’m trying to add it.

image

Oh, thank you, very timely to receive my feedback!

Hi, t_bonhomme, I have a question. How do I change and delete my note? Do I have to expand the plugin to delete or change my notes here?
image

Hi Woo. You can edit, delete and indent/unindent the rems.

You can’t unindent too many times.

Without the plugin, you can’t add a rem without a timestamp, and it is impossible to remove the timestamp. I will try to solve these issues.

I recommend you to be linear with the timestamps.

While editing, you can check with the refresh button between 2 modifications.

Update

5 Likes

The update is too fast, you’re great, thank you!

1 Like

hi,@t_bonhomme. When I add a plugin in the rem, it will automatically create three “RemNote YT” page. What should I do now?

Hi @Woo.

Have you got this issue with rnyt?

If you deleted the rem “RemNote YT”, try to recover it and delete the other ones. It should be the oldest one.

If you still have this issue :

  1. delete all the rems with the name “RemNote YT”
  2. delete the related rems from the trash like “Undeleted Rem on 4/1/2022”
  3. change the plugin’s rnyt url to https://illustrious-brazen-maraca.glitch.me
  4. it will create a rem with the name “RemNote YT Temp” the first time you use the plugin
  5. wait at least two weeks, the time needed for RemNote to delete the rems in the trash
  6. change back the plugin’s rnyt url to https://local-maroon-badger.glitch.me
  7. if it works, “RemNote YT Temp” can be deleted