How to make timestamp notes beside of embedded youtube video in one tiddler?

#1

I would like to embed a youtube video, and make timestamp notes under it, all in a single tiddler.

I know how to embedding youtube videos, copy paste done, thanks Tiddlywiki,
but I am quite lost how to make the timestamp notes.

the sources of the notes usually mixed the youtube chapters and hand picked timestamp notes in the youtube comments, plus my own notes, which result like this:

0:12 intro
1:10 chapter one
1:15 my question 1 < my note
3:43 chapter two
2:10 my question 2 < my note
6:13 chapter three
7:11 “funny comment” < from comment.
8:55 outro

I imagine if I can paste the above notes just underneath the embedded video, somehow tiddlywiki can automatically add an appropriate link to each timestamp for me (by programmatic automatic find and replace?), so that when I click it, I can jump to the corresponding time of the embedded video and continues to play.

The whole operation is the same as doing timestamp notes on youtube.

I tried a few macros I could find on wild, but they didn’t seem to be what I needed, either adding notes was cumbersome, or the settings were complicated.

I am not a programmer, forgive me if my imagination is too unrealistic. :slight_smile:

#2

This may require javascript. See this tutorial: How to Add Timestamps To Embedded YouTube Videos - YouTube

(I can rig up things that approximate this behavior, but they all involve re-rendering the iframe with a different start time, which is not the kind of responsiveness you would want for jumping to your timestamp locations.)

#3

Thank you for your reply.

Certainly, iframe re-rendering is better then none, :slight_smile:
Would you please provide me with a comprehensive how to deploy it in TW.

Thanks a lot.

#4

http://www.telumire.be/TiddlyTweaks/index.html#Music%20player%20with%20timestamps

May be something similar to this audioplayer with timestamps by @telumire can be made for youtube videos?
I don’t know how to do it though.

#5

thanks, I copy paste the “music player” tiddler to my tw, which is works, but I don’t know enough about marcos to change it to support embedded youtube. sigh~

#6

This youtube video macro is little more complex than the audioplayer, again created by @telumire

May be someone will help you to make it work similar to the audioplayer macro.

#7

Thanks, I’ve seen this one, but I can’t somehow to figure out how to easily add my notes there. :(, yes, I am too newbie to take advantage of the performance of TW.

#8

It should definitely be doable in pure wikitext. Not overly complicated but will take some fiddling. Basically:

split at each new line
split at first space character
the first part (the time) is converted into seconds (because that’s what the youtube url requires, I think)
…and save the second part to be part of a link label
And now use the basic url with the time appended to form a link with the second part as the link label

Something like that, in a listwidget.

#9

I have developed some media widgets and have created a new template for these types of annotations, a demo is found here:

https://utubesimpleannotations.tiddlyhost.com/

2 Likes
#10

wow! you are a star!

I see this page in your demo site: utube simple annotations, which exactly what I expect in result,

I opened the tiddler, it shows me

{{Max Tegmark: The Case for Halting AI Development : Lex Fridman Podcast #371||$:/bj/yt/playtemplate}}

Obviously copying this to my TW will not work.

Could you tell me how to deploy to achieve such result,
so I can make it works in my TW?

You are genius, thanks a lot!

oh, I found a problem, if I only quote the tiddler permalink to paste in browser to open it, it won’t shows anything.

#11

@yhucrdgk I tried to adapt the audioplayer with timestamps by @telumire for working with videos.

image
image1920×918 108 KB

And its working with local videos. I dont know how to do it for youtube videos.

Annotations can be made in a easier way by making a custom editortoolbar which create the timestamp buttons.

Here is an example - the video wont play because it’s a local file. You can replace it with one of yours to see it working. This needs more work. This is just to show you how the audioplayer can be modified

#12

thanks for your works,

did you check the demo @buggyj delivered just now, quite impressive.

#13

I did checked his plug in and it works beautifully. Only thing I noticed was that the annotations and the video are in separate tiddlers.

I have been using his creations for a long time now and I am an admirer of his works.

I was trying to adapt telumire’s audioplayer to work with videos before @buggyj posted his plug in. That’s why I just shared my findings even though buggyj had already shared his plug-in.

#14

You need to copy these plugins to you tw - I usually drag them accross

image

#15

yes, maybe this is why the premalink of the video tiddler won’t show on it own. hope this will merged into one tiddler, which I can share my notes.

#16

I have the annotations in separate tiddlers to avoid mixing the annotations with the html markup widgets, as I find complicated wikitext hard to edit.

It would be possible to have the video tiddlers play on there own by using the template cascade,

#17

I too have been interested in timestamped bookmarks into audio and video for some time.

  • So nice work all involved. An ideal future may be the tools to help create these as well, if one could watch/listen and click at a time to generate a time link, even if we have to name it later.

Timestamed bookmarks would be great inside one of the TiddlyWiki presentation solutions to support showing clips, perhaps with an optional time limit eg; start at 60 seconds end at 90 seconds.

#18

There is a new version of $:/plugins/bj/mediaplayerYTAsimple which fixes the ‘no video’ problem when starting on page loading:

You need this new version here: utube simple annotations

1 Like
#19

That’s super cool! checked and no problem when visit the premalink.

Sorry I have to ask a silly question for how to make it work on my TW, what I’ve done is:

  • drag the pluging to my TW and import
  • had checked the 4 shadow tiddlers has been imported.
  • drag the 3 tiddlers which title include “#371” to my TW,
  • open the one “#371-play”, it show me Undefined widget 'msequence'

did I miss something?

#20

@buggyj

one more thing, the video will auto start when tiddler opens,
if I open 2 play tiddlers,
they are playing together which bit annoying,

would you consider to not auto play when tiddler opens? or somehow open one auto-play, and stop the another playing?

Thanks. :slight_smile: