Annotating youtube videos with timestamp (v2)

How To Tips
1

Wrote a little snippet this morning and thought I’d share. It’s supposed to aid in annotating youtube videos by capturing the current timestamp of the video you’re on and sending that to emacs.

First of all I extended the org-roam bookmarklet a bit, so that it’ll send a capture with the youtube link and timestamp to org-protocol if you’re currently on a video on youtube.com:

javascript:
(function(){
  let v = (new URLSearchParams(window.location.search)).get('v');
  if(location.href.indexOf("youtube.com")>=0 && v !== null)
  {
    let seek = (document.getElementsByClassName('video-stream html5-main-video')[0].currentTime).toFixed();
    let ytb = "https://youtu.be/" + v;
    location.href='org-protocol://roam-ref?template=v&ref=' + encodeURIComponent(ytb) + '&title=' + encodeURIComponent(document.title) + '&body=' + (new Date(seek * 1000)).toISOString().substr(11,8) + ' - ' + encodeURIComponent(ytb + '&t=' + seek);
  }
  else {
    location.href='org-protocol://roam-ref?template=r&ref=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent(window.getSelection())
  }
})();

Second, the capture template for the emacs config:

(setq org-roam-capture-ref-templates
      '(("v"
         "video ref"
         plain
         "* %? - ${body}\n"
         :if-new
         (file+head
           "webnotes/${slug}.org"
           "#+title: ${title}\n\n")
         :immediate-finish t
         :jump-to-captured t
         :unnarrowed t))

There’s definitely room for improvement. For example I’m not sure its a good idea to put the timestamp+link into the headline. Perhaps that should be in a property-drawer instead. Hopefully someone finds it useful though.

3 Likes
2

Org also has a lesser-known feature org-timer-item that works really well with videos, if you don’t pause them. It is bound to C-c C-x - by default.

1 Like
3

Good evening, I’m interested in implementing this feature, could you give some references for implementing this for beginner users?

  • Where do i put the javascript function?
  • Maybe you have some good reference for the org-protocol feature?

Thank you

4

You may want to check out the org-roam v1 documentary: Org-roam User Manual

The code above is for org-roam v2 though, which is currently only an alpha release under development. The changes necessary should be minimal though.

To create a bookmarklet, just make a new bookmark in your browser and enter the javascript code as location of the link.

bookmarklet
bookmarklet777×319 16.7 KB

2 Likes
5

That’s great, thank you I will try :slight_smile:

6

Is there anyway to make it to a regular capture instead of ref ?