RemNote Html Player

t_bonhomme · January 31, 2022, 9:43pm

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?

Plugin Name : rnhp (by example)
Plugin URL : https://remnote-html-player.glitch.me
CSS Height : 600 (by example)
Permissions : Read and Create
Location : Inline

How to use the plugin?

copy paste your video link in RemNote
go into the rem
insert the plugin
wait the play icon
click on the video to start
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?

you can skip and use these settings later
go to the top-level rems
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

UMNiK · February 1, 2022, 8:51am

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?

t_bonhomme · February 1, 2022, 9:51pm

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.

t_bonhomme · February 4, 2022, 10:02pm

Update

more control for the player
bar position fixed

celebrian · February 6, 2022, 5:51pm

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!

t_bonhomme · February 6, 2022, 7:50pm

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?

t_bonhomme · February 11, 2022, 6:06pm

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.

aly91 · February 27, 2022, 12:02am

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

t_bonhomme · February 27, 2022, 10:11am

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.

Leesin · March 9, 2022, 3:33pm

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!

t_bonhomme · March 9, 2022, 10:00pm

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

Leesin · March 10, 2022, 1:21am

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

Woo · March 12, 2022, 11:06am

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?

t_bonhomme · March 12, 2022, 9:53pm

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.

t_bonhomme · March 13, 2022, 5:30pm

Update

buttons revamped, speed buttons added, overlay

rnhp-buttons1200×660 431 KB
LaTeX supported between $$ (example : $$\sum_{i=1}^\infty\frac{1}{n^2}=\frac{\pi^2}{6}$$)

rnhp-latex1200×554 492 KB
missing speed shortcuts added in shortcuts
play button displayed if ended

Leesin · March 15, 2022, 4:07pm

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

Woo · April 1, 2022, 5:27am

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

t_bonhomme · April 1, 2022, 1:46pm

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 :

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

t_bonhomme · August 9, 2022, 4:07pm

The plugin issue is fixed. You can use it if you have installed it before RemNote 1.8.

bleedingsaber · August 10, 2022, 12:58am

Will this go to plugin market?