Takeing video notes via media-extend and obsidian-yt-transcript

[jackjack]

Hi everyone, recently I’ve been thinking of the optimal solution for taking video notes then I’ve found the two plugins media-extend and obsidian-yt-transcript, I want to navigate through transcripts, but there are some obstacles, cause I’ am new to plugin development and don’t know how to solve them. So I write it for some help.

media-extend could implement navigation through #, though there is a bug so need to put it inside a callout and inject css snippet .workspace-leaf-content[data-type="media-view"] ~ .workspace-leaf-content[data-type="markdown"] { display:none; }

obsidian-yt-transcript generate timestamp link to jump to YouTube using ? and & in url, like below

my initial thought was to change the & to # in transcript link, but no luck, because url in editor register an event in media-extend while url in transcript view doesn’t

I wonder if obsidian support any way to register an event from another plugin? or other approach to implement this and won’t take much effort.Any insights or suggestions would be greatly appreciated !

[ichmoimeyo]

Here is how I do it manually …
Instead of obsidian-yt-transcript I use the Glasp chrome extension that can highlight, annotate, tag, ChatGPT summarize & save timestamps:

Glasp PDF & Web Highlighter + YouTube Summary

I use this in 2 ways:

I. Highlight & annotate the transcript

and it looks like this when saved as markdown & brought into Obsidian …

OR mainly

II. I just copy & paste the whole transcript including the timestamps - as markdown - from the Glasp dropdown next to the video [just CLICK COPY ICON - no need to highlight transcript!]

directly into Obsidian and using the media-extended plugin and …
using the Regex Find/Replace plugin:

Find: v=undefined - Replace with: v=XYXYXY
Find: &t - Replace with: #t
Find: s) - Replace with: )

I can play(directly in Obsidian) & navigate to all the timestamps and cut out or highlight the bits I want as well as read the ChatGPT summary if I’ve included it.

Hope you find some of the above useful.

[ichmoimeyo]

here are a few examples I posted in a thread a few weeks ago …

[1100](https://www.youtube.com/watch?v=Lg5P2w_Ro1c#t=1100) plays from 1100 onwards
        
[1100-1120](https://www.youtube.com/watch?v=Lg5P2w_Ro1c#t=1100,1120) plays from 1100 to 1120 **and stops**.
        
[1100-1120&loop](https://www.youtube.com/watch?v=Lg5P2w_Ro1c#t=1100,1120&loop) plays from 1100 to 1120 **and loops**.

… this is how I entered it into Obsidian(editing mode - source mode)->

… when I switch to reading mode and click on 1100 or 1100-1120 or 1100-1120&loop a tab/panel opens on the right-hand side and plays the video->

… however embedding does NOT work.

… putting a ! in front of them doesn’t work - if you click on the video they all just start playing at the beginning.

… with local mp4 …

internal link: [[test.mp4#t=5,10]]

internal embeds: ![[test.mp4#t=5,10]]

… embedding works …

mp4 seems to behave more consistently overall, except for not looping when embedded and played from the web.

mp4 CLIP from La Voz - España

(https://dpvclip.antena3.com/assets12/2023/12/22/7F43D89F-27C9-47DC-AC06-06FCE72DD217/video_480p_es.mp4)

[below won’t play correctly here in the forum page - tested in Obsidian: generally needs to be closed & reopened each time to function correctly]

“DOWNLOADED” mp4 LOCAL

Plays from 10 onwards

in side-panel [[video_480p_es.mp4#t=10]]

embedded![[video_480p_es.mp4#t=10]]

Plays from 10-20 and stops

in side-panel [[video_480p_es.mp4#t=10,20]]

embedded ![[video_480p_es.mp4#t=10,20]]

Plays from 10-20 & loops

in side-panel [[video_480p_es.mp4#t=10,20&loop]]

embedded ![[video_480p_es.mp4#t=10,20&loop]]

\\\\\\\\\\\\

mp4 PLAYED FROM WEB

Plays from 10 onwards

in **side-panel** [in **side-panel**](https://dpvclip.antena3.com/assets12/2023/12/22/7F43D89F-27C9-47DC-AC06-06FCE72DD217/video_480p_es.mp4#t=10) 

**embedded** ![**embedded**](https://dpvclip.antena3.com/assets12/2023/12/22/7F43D89F-27C9-47DC-AC06-06FCE72DD217/video_480p_es.mp4#t=10) 

Plays from 10-20 and stops

in **side-panel** [in **side-panel**](https://dpvclip.antena3.com/assets12/2023/12/22/7F43D89F-27C9-47DC-AC06-06FCE72DD217/video_480p_es.mp4#t=10,20) 

**embedded** ![**embedded**](https://dpvclip.antena3.com/assets12/2023/12/22/7F43D89F-27C9-47DC-AC06-06FCE72DD217/video_480p_es.mp4#t=10,20) 

Plays from 10-20 & loops - EMBEDDED does NOT LOOP

in **side-panel - does LOOP** [in **side-panel**](https://dpvclip.antena3.com/assets12/2023/12/22/7F43D89F-27C9-47DC-AC06-06FCE72DD217/video_480p_es.mp4#t=10,20&loop) 

**embedded - does NOT LOOP** ![**embedded**](https://dpvclip.antena3.com/assets12/2023/12/22/7F43D89F-27C9-47DC-AC06-06FCE72DD217/video_480p_es.mp4#t=10,20&loop)

 

PS:
If you find the above comments a little too long & detracting from you trying to find a solution programmatically with obsidian-yt-transcript …
… let me know and I’ll delete them.

[jackjack]

@ichmoimeyo hi, thanks a lot for your information, I’ve be keep finding the good solution

[JPC5]

I think it would also be good to take timestamp notes into account because when you select a timestamp it is displayed within the obsidian player and not in the browser like media extended.

juliang22/ObsidianTimestampNotes

Readwise reader does a great job with transcriptions and annotations. If something similar could be achieved in obsidian it would be incredible.

If you click on the video you will see the exact moment where it is shown

Taking notes from YouTube videos in Obsidian

[ichmoimeyo]

@JPC5

The media extended plugin DOES PLAY the video in Obsidian … as you can see below …

Timestamps in left tab & video playing in tab next to it.

In the video you posted Nicole wrongly states at around 3:50

The annoying thing with this one though is if you click on this, it will open it up but it opens it up not in the Obsidian browser here it’ll open it up in your browser.
… my YouTube comment:
Hi Nicole - a belated thank you for your thorough video. The Media Extended plugin does play the timestamps correctly WITHIN Obsidian for me. I believe it did not work for you because you pasted in a video url contained in a playlist - see @3:20 - instead of the direct video url.

… that is because she made a mistake - see @3:20 - and used a youtube playlist url instead of the actual video url as I pointed out to her in the comments …
EDIT: *****************************************
I just double-checked and both …
Playlist version:
[45:12](https://www.youtube.com/watch?v=IrK-XDH72bw&list=WL&index=38&ab_channel=NYWebPerformanceMeetup#t=2712.304840952316)
AND
Direct video link:
[45:12](https://www.youtube.com/watch?v=IrK-XDH72bw#t=2712.304840952316)

play correctly for me in Obsidian.

So I can just guess that Nicole in her testing inadvertently disabled media-extended or didn’t reload the file after reenabling it.
… because if media-enhanced is disabled both of the above will open in the browser & start playing at 0:00.
OR
WAS in “EDITING - PREVIEW MODE” INSTEAD OF “READING MODE”

EDIT/end *****************************************

… so give Media Extended another try, it is working very well for me.

PS: The juliang22/ObsidianTimestampNotes plugin is Desktop only & thus won’t work on mobile.

[JPC5]

How do you make it so that when you click on a media extended timestamp it opens in obsidian?
I have tried it with a video that is not in a playlist and it keeps opening in the browser.

This is the youtube link:

How language shapes the way we think | Lera Boroditsky | TED

[ichmoimeyo]

@JPC5
… with media-extended plugin enabled
In editing - Source mode:

In reading mode

here is the markdown file:
for_JPC5.md (700 Bytes)

PS:
If you use a regular youtube transcript file, you need to adapt the timestamps for it to play at the correct time in Obsidian with media-enhanced … e.g.

https://www.youtube.com/watch?v=RKK7wGAYP6k&t=486s starts play at 0:00
using the Regex Find/Replace plugin:

Find: &t / Replace with: #t
Find: s) / Replace with: )

https://www.youtube.com/watch?v=RKK7wGAYP6k#t=486 plays correctly at 8:06

[ichmoimeyo]

@JPC5
… here is a markdown file with timestamps & notes I made myself of a Language Learning video made by Nicole:

_forJPC5 SEreg Learning Swedish in 30 days with Obsidian (and other app) - YouTube.md (4.0 KB)

[ichmoimeyo]

@JPC5 ¿SOLUTION?
MUST BE IN “READING MODE” … NOT → “EDITING - PREVIEW MODE”

… creating the timestamp

… so I think the problem is clicking the link when you are in editing - preview mode

… you have to be in reading mode

PS:
Until recently - when “tables” were introduced - I …
never used
editing - preview mode.PNG

always
editing - Source mode.PNG

… and thus never encountered the problem as nothing happens when you click
[02:48](https://www.youtube.com/watch?v=RKK7wGAYP6k#t=168.7782718321533)

… so, if you use editing - preview mode.PNG → always switch to reading mode.PNG
before clicking the timestamps for them to work properly within Obsidian.

try it out with …
for_JPC5 How language shapes the way we think | Lera Boroditsky | TED + 3 TIMESTAMPS.md (450 Bytes)

[JPC5]

Thank you very much for the examples, it is now working correctly. It is a pity that they have abandoned the development of version 3.

[jackjack]

@ichmoimeyo ， @JPC5
I attempted write it, see here

[JPC5]

I’m trying it out, it’s great!
is it possible to activate the issues section of github to give you some ideas?

[jackjack]

Appreciate it, it a forked repo and issue is disabled by default, now I’ve opened it.

[JPC5]

Thanks, I have written down some ideas and small errors. I suppose you already have many of them in mind, but I just wanted to help.

[ichmoimeyo]

Loving it, thank you!
Still exploring all the possibilities.
One setting I am especially happy with is the …

Transcripts Interval setting …
I have changed it from the default 0, to 3 and currently am liking 5 very much …

… the 5 setting, with approx. 10 sec spacing in this video … probably because I am more used to it.
… the 0 setting on the other hand is more powerful enabling one to zoom into a precise moment.

[jackjack]

Hi, it looks like the obsidian-yt-transcript plugin, I added it to Media-Extend in this fork

about lines of per transcript, obsidian-yt-transcripts doing nothing but concatenate the lines from youtube, it maybe not accurate, but it’s normal, because not every sentence that people speak is of the same length.

[ichmoimeyo]

@jackjack

I added it to Media-Extend in this fork

yes, that is what I am using

[jackjack]

that’s strange, because I added many buttons after each transcript

[ichmoimeyo]

yes, the screenshot I posted was of the 3 versions where I had already done the “Copy all timestamps” …
Here is a screenshot that shows it better …