This plugin allows side-by-side notetaking with videos. Annotate your notes with timestamps to directly control the video and remember where each note comes from.

Last update: Jun 19, 2022

Obsidian Timestamp Notes

Use Case

Hello Obsidian users! Like all of you, I love using Obsidian for taking notes. My usual workflow is a video in my browser on one side of my screen while I jot down notes in Obsidian on the other side. While Obsidian itself is a great notetaking tool, I found this setup quite lacking. When reviewing my notes, it would often take me a long time to find the section of the video the note came from and I found it annoying constantly having to switch between my browser and Obsidian.

Solution

This plugin solves this issue by allowing you to:

  • Open up a video player in Obsidian's sidebar
  • Insert timestamps with a hotkey
  • Select timestamps to navigate to that place in the video

Setup

  • Download and enable the plugin
  • Set the hotkeys for
    • opening the video player (my default is cmnd-shift-y)
    • inserting timestamps (my default is cmnd-y)
    • playing/pausing video (my default is cntrl-space)
  • Set options for
    • colors of the url, url text, timestamp button, and timestamp text
    • Title that is pasted when 'Open Video Player' hotkey is used

Usage

  • Highlight a video url and use the 'Open Video Player' hotkey
  • Jot down notes and anytime you want to insert a timestamp, press the registered hotkey
  • Toggle pausing/playing the video by using hotkey (my default is option space)
  • Open videos at the timestamp you left off on (this is reset if plugin is disabled)
  • Close the player by right-clicking the icon above the video player and selecting close

Valid Video Players

This plugin should work with:

  • youtube
  • vimeo
  • facebook
  • soundcloud
  • wistia
  • mixcloud
  • dailymotion
  • twitch

Demo

ezgif.com-gif-maker.1.mov

Known Issues

  1. Inserting timestamps into a bulleted section does not work. Unfortunately, code-blocks cannot be in-line with text. Make sure to press enter/insert the timestamp on a new line.
  2. If you decide to change the colors of your buttons/text, any old buttons/text will not update with the new colors until you reload the app. You can also click the '<>' when hovering over the code-block and it will refresh with the new colors.

Other Authors

This plugin uses the react-player npm package: https://www.npmjs.com/package/react-player.

GitHub

https://github.com/juliang22/ObsidianYoutubeTimestampNotes
You might also like...

A collaboration application built with the twilio-video.js SDK and React.js

A collaboration application built with the twilio-video.js SDK and React.js

A collaboration application built with the twilio-video.js SDK and React.js

Jun 23, 2022

A group video calling app using agora and react.

Agora Group Video Calling Resources Agora Website Agora Docs ngrok Install Agora React Wrapper Command to install Agora React Wrapper - npm install gi

Jun 13, 2022

Bridge is a web based video conferencing application which bridges the gap between people and connects them online.

Bridge is a web based video conferencing application which bridges the gap between people and connects them online.

Bridge is a web based video conferencing application which bridges the gap between people and connects them online. It is a simple and easy to use application which offers a distraction free interface. The application can be used to create a one on one or a group video call. The video call comes with features like mute audio/video, share screen and in-built chatting.

Feb 28, 2022

Implemented Audio and Video Player in React Native

Implemented Audio and Video Player in React Native

Audio_Video Implemented Audio and Video Player in React Native For Android, Run : 1- yarn install 2- yarn android For IOS, Run : 1- yarn install 2- cd

Mar 31, 2022

A customizeable HTML5 Video React component with i18n and a11y.

A customizeable HTML5 Video React component with i18n and a11y.

react-html5video A customizeable HoC (Higher Order Component) for HTML5 Video that allows custom and configurable controls with i18n and a11y. V2 API

Jun 21, 2022

A video upload and streaming service specifically built with react

A video upload and streaming service specifically built with react

Prequel-Streaming Table of Contents -- Description -- Usage -- License -- Questions Description This application is designed to be a video upload and

Mar 21, 2022

Tplayer.js - Flexible and easy Dash/HLS/DRM integration for HTML5 video.

Tplayer.js - Flexible and easy Dash/HLS/DRM integration for HTML5 video.

This project is made possible with Plyr, Hls.js, Dash.js. Features 📑 HLS and DASH playback 🎥 Multi quality supported 🎬 Drm with custom header suppo

Jun 17, 2022

A web video player built for the HTML5 world using React library.

video-react Video.React is a web video player built from the ground up for an HTML5 world using React library. Installation Install video-react and pe

Jun 24, 2022

Lion Player - open-source React video player powered by VideoJS

Lion Player - open-source React video player powered by VideoJS

Jun 3, 2022
Comments
  • 1. Possibility compatible with Obsidian Mobile?

    Hi Developers!

    Thank you so much for creating this plugin, eventho that is still on beta version but I believe this will be one of community favorite plugin.

    I am just curious if you guys are able to make it work also on Mobile?

    Regards, Denny

    Reviewed by Dennyyusuf at 2022-05-17 02:06
  • 2. Does not give option to enable

    Hi I have placed the folder correctly in the plugins folder. However I have no option to enable the plugin.

    image

    I am unsure what I am doing wrong? Thanks for your help! I really want to try this plugin, it provides one of the functions I miss most about roam.

    Reviewed by knuckleheader at 2022-05-16 18:58
Ready-to-deploy webapp for sharing home videos: a React frontend with a Serverless Framework / AWS Lambda backend using FFmpeg to process videos.
Ready-to-deploy webapp for sharing home videos: a React frontend with a Serverless Framework / AWS Lambda backend using FFmpeg to process videos.

Serverless Media Portal ?? What is this? This repo contains the full stack for creating a private, password-protected website for sharing home videos

Jun 24, 2022
Video conferencing application with screen sharing, participant control and more with SignalWire Video APIs in ReactJS

React Zoom Clone This React/Node.js codebase implements Zoom's core features using the SignalWire Video SDK and the SignalWire Video REST API. Running

Mar 30, 2022
Resolution switcher adds the ability to select the video quality in video.js player.

Video.js Resolution Switcher Resolution switcher for video.js v5 Example Working examples of the plugin you can check out if you're having trouble. Or

Apr 19, 2022
Video-chat-app - A React video chat app using WebRTC
Video-chat-app - A React video chat app using WebRTC

video-chat-app Description Il s'agit d'une application de chat vidéo React utili

Jan 11, 2022
PetTube--Youtube-Clone - Full Stack YouTube Clone for uploading and viewing Pet Videos

YouTube Clone Building A Full Stack clone of the YouTube web for Pet Videos that

May 4, 2022
🎥 Remotion is a suite of libraries building a fundament for creating videos programmatically using React.
🎥 Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

?? Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

Jun 20, 2022
Create videos using React!
Create videos using React!

Reactive Videos are videos created using HTML and React components. This allows you to leverage the almost limitless possibilities of the web browser

Jun 4, 2022
Video calling and chatting app (PWA) built using React.js, Web RTC and Socket.io
Video calling and chatting app (PWA) built using React.js, Web RTC and Socket.io

This is a video calling application where users can call other user and will also have the capabiltiy to mute their mic and audio. Their is also real time chat functionality. It's also a modern PWA so users can install it on their devices like other native apps.

Jun 16, 2022
qier-player is a simple and easy-to-use h5 video player with highly customizable UI and rich features.
qier-player is a simple and easy-to-use h5 video player with highly customizable UI and rich features.

A simple and easy-to-use h5 video player with highly customizable UI and rich features.

Jun 5, 2022
It Is A Video Call Web Application Similar To Google Meet And Microsoft Teams Made With React JS, TypeScript, CSS, HTML And JavaScript.

SlackTeams It Is A Video Call Web Application Similar To Google Meet And Microsoft Teams Made With React JS, TypeScript, CSS, HTML And JavaScript. To

Jun 12, 2022