I am looking for a way to get the current Youtube chapter/section through an API call.
Which would work for all user cases, including: public browser extensions, embedded iframes, and videos with malformed descriptions.
Is there a way to get the current chapter through the API that I am missing?
What is the best way to communicate with Google and requests these API interfaces [video.getCurrentChapter()] and [video.seekToNextChapter()]?
Example:
let video = document.querySelector('.html5-video-player');
video.seekToChapterWithAnimation(0); //skips to start of the first chapter
video.getCurrentTime(); //returns 2164 (36:04)
video.getCurrentChapter(); //TypeError: video.getCurrentChapter is not a function
video.seekToNextChapter(); //TypeError: video.seekToNextChapter is not a function
Luckily there is a quick way to seek to a chapter with the video.seekToChapterWithAnimation(Int) method. However this is only helpful if you know the chapter you wish to skip to.
Youtube API offers a way to get the current time, with video.getCurrentTime(), but this only returns back the seconds, and not the current chapter.
Crude workarounds:
- Get the video description from:
https://www.googleapis.com/youtube/v3/videos?part=snippet&id=[VIDEO_ID]&key=[YOUR_API_KEY]
and parse the responseJSON.items.snippet.description field and look for the chapter times, then compare it with the video.currentTime() to see if it is inside a chapter range.
-- However this would not work for public browser extensions or userscripts. Also fails if the description is malformed with other or improper timestamps.
Example:
responseJSON.items.snippet.description: "Top 100 List.\n\n00:00 - Number 1\n01:28 Number 2\n03:19 Number 3"
- Another technique would be to look into the description's HTML if on the Youtube site, and gather the timestamps directly.
-- However this would not work if the video is embedded in an Iframe, or has a malformed description.
Example:
<div id="description" slot="content" class="style-scope ytd-video-secondary-info-renderer"><yt-formatted-string class="content style-scope ytd-video-secondary-info-renderer" force-default-style="" split-lines=""><span dir="auto" class="style-scope yt-formatted-string">Top 100 List
Chapters:
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" spellcheck="false" href="/watch?v=[VIDEO_ID]&t=0s" dir="auto">0:00</a><span dir="auto" class="style-scope yt-formatted-string"> Chapter 1
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" spellcheck="false" href="/watch?v=[VIDEO_ID]&t=23s" dir="auto">0:23</a><span dir="auto" class="style-scope yt-formatted-string"> Chapter 2
</span><a class="yt-simple-endpoint style-scope yt-formatted-string" spellcheck="false" href="/watch?v=[VIDEO_ID]&t=67s" dir="auto">1:07</a><span dir="auto" class="style-scope yt-formatted-string"> Chapter 3
</span></yt-formatted-string></div>
According to: https://developers.google.com/youtube/players/support
We support the YouTube IFrame API on Stack Overflow.
Google engineers monitor and answer questions with the youtube-iframe-api tag.
Is there another way to properly submit an API call requests to Google?