This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
I helped work on the Jamstack TV project (now dormant with the rest of the jamstack.org site, though the feature is still up), which used a lovely Algolia integration to allow deep searching of video transcripts. It was a really cool feature.
In The Static Chronicles Twitch stream (episode 1 and episode 2), Mike and I explored an 11ty plugin to output the transcript of a YouTube video to allow video transcripts to be embedded into video posts, thus extending some of this feature to work with Pagefind (the static search engine).
I’ve wired this up on a few video posts on my site (that I know have higher quality transcripts/captions):
- Live Editing an Eleventy Project in CloudCannon with Bookshop
- Building a multi-language Taylor Swift fan site (10 Minute Version) (Zach's Version)
- Eleventy and CloudCannon: New Best Friends
- The Eleventy v2.0 Release, a talk at the Eleventy Meetup
- Exploring the Bounds of Jamstack on What the Jam
The really cool part of these demos is that the actively playing video highlights the currently active portion of the transcript—and you can click any portion of the transcript to skip around on the video!
The Pieces
There are a few web components at play here, but I don’t currently have the energy to formally publish them, so I’ll just link them up here:
- An asynchronous Eleventy
fetchYoutubeTranscriptfilter to server-fetch the transcript markup (caching it locally for 7 days). - A WebC component (
youtube-deep-link.webc) enhances the caption content (fetched from thefetchYoutubeTranscriptfilter) with a<youtube-deep-link>custom element for timestamped buttons that point to alite-youtubeelement.- Notably, this required upstream changes to
paulirish/lite-youtube-embedto access the YouTube Iframe JavaScript API (Update: these changes are available inv0.3.2+).Until those are merged, you can use this drop-in fork on npm@zachleat/lite-youtube-embed.
- Notably, this required upstream changes to
- A tiny
<off-viewport>web component to toggle a class when an element is visible in the viewport. I use this to put the video in the lower corner of the viewport as you scroll through the transcript. This one is a little tricky to use because it can take you into a rendering loop if you absolute/fixed/sticky the position of theoff-viewporthost element directly (so, uh—don’t do that).
Conclusion
I’ve been making more and more videos and I really like escalating that content as first-party text on my static site too. Investing in high quality closed captions (as a way to make the videos more accessible) elevates the content and aligns it more closely with my existing stack of tools.
This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
Zach Leatherman | Sciencx (2024-02-27T00:00:00+00:00) Elevating Video Transcripts as Searchable Content. Retrieved from https://www.scien.cx/2024/02/27/elevating-video-transcripts-as-searchable-content/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.