this post was submitted on 16 May 2024
7 points (100.0% liked)

JavaScript

1989 readers
1 users here now

founded 1 year ago
MODERATORS
 

I can do this manually using the following: Right-click on the video player, copy debug info, paste into text editor, and Ctrl+F for "addocid".

What is the best way to do this automatically?

By modifying an ad accelerator I found, I can reliably detect when a pre-roll ad is playing:

function handleVideoAd() {
	const video = document.querySelector('video');
	const adElement = document.querySelector('.video-ads.ytp-ad-module');
	if (video && adElement && adElement.children.length > 0) {
		alert('advertisement found!')
	}
}

function initializeAdHandling() {
	handleVideoAd();
	const observer = new MutationObserver(handleVideoAd);
	observer.observe(document.body, { childList: true, subtree: true });
}
initializeAdHandling()

If I had the video ID, I could then open the video in a new tab using something like:

window.open('https://www.youtube.com/watch?v=adVideoID');

However, I am at a bit of a loss as to how to extract the ad video ID itself.

In the browser inspector, the only places I can find the ad video ID are:

  1. Within the URL for ytp-cued-thumbnail-overlay-image
  2. As adVideoId within var ytInitialPlayerResponse, which itself is within <script nonce="rwc3vYf3vRLEyNQKsJOgig">, where rwc3vYf3vRLEyNQKsJOgig changes with every video.

What would be the best way to extract the advertisement video ID?

Apologies for if I'm going about this the wrong way. I am (very!) new to JavaScript, but interested in learning. Please let me know if I've broken any community rules, or committed any other sort of faux pas. Thanks! :)

you are viewing a single comment's thread
view the rest of the comments
[–] [email protected] 2 points 6 months ago (1 children)

Yes. What's the challenge with extracting from the url?

[–] [email protected] 1 points 6 months ago

What’s the challenge with extracting from the url?

One problem with the first approach is that ytp-cued-thumbnail-overlay-image does not seem to exist in all cases, so it seems (to me, at least) like an unreliable method.

For the second approach, I'm not sure how one would go about locating the adVideoId text.

  • Should I be trying to automatically search the page HTML for it?
  • Should I be trying to figure out where it is ahead of time, and navigate to it via the DOM tree?
  • Something else entirely?