How to Get Duration of Reels Videos on Instagram
The simplest way to get video duration for the actively playing reel on Instagram’s Reels page, is to find the corresponding video HTML element, and examine its duration attribute. This can be done with the following code (and can also be extended to check other videos accessible client-side that may not be currently playing, if needed at a later point):
/**
* Checks if a video is currently playing.
*
* @param {HTMLVideoElement} video - The video element to check.
* @return {boolean} Returns true if the video is playing (i.e., not paused/ended,
* has at least one frame [readyState >= 2] & seeked to a non-zero time [currentTime > 0]);
* false otherwise.
*/
const isVideoPlaying = (video) =>
!!(
video.currentTime > 0 &&
!video.paused &&
!video.ended &&
video.readyState >= 2
);
/**
* Retrieves the currently playing video element.
*
* @return {HTMLVideoElement|undefined} The currently playing video element, or
* undefined if no video is playing.
*/
const getCurrentReel = () => {
const videos = document.querySelectorAll("video");
let currentVideo = Array.from(videos).find(isVideoPlaying);
return currentVideo;
};
const currentVideo = getCurrentReel();
const duration = currentVideo?.duration; // The duration of the currently playing video, in seconds.
Related helper functions to facilitate this are here.
I don’t think it is sensible to interface with the Instagram API for this task (or other similar tasks), as that would, in my opinion, be an antipattern for an application that already requires loading and rendering the actual web page to the user. As we can inject JavaScript into the page, we can directly access the video element and get the duration from there. This is much simpler than dealing with Instagram’s Reels API. Such APIs are necessary for complex tasks like fetching complete user data, posting content, etc. – esp. tasks that require authentication/authorization and may not be tied to the web page itself– but in this case, we are already on the page, so we can just access the video element directly.