JavaScript to select video quality on YouTube

Question

I'm trying to set up a Siri Shortcut on iOS to make AirPlaying a YouTube video to an Apple TV easy. As part of that process, I want to select the quality of the video (presumably using Javascript), but I'm having trouble getting that going. Here's what I've got so far (imgur link to view on desktop/non-iOS devices). That successfully uses JavaScript to pause the video, rewind it back to the beginning since YouTube autoplays, then connects to the Apple TV with AirPlay, waits for the TV to turn on, and clicks on the video to unmute it. However, everything I've tried to set the video quality hasn't worked, and I'm tearing my hair out over here. Anyone have any idea if that's possible? Is it a parameter of the video that can be set? Or can I use JavaScript to click on the settings button and pick the quality? My Javascript is very weak, so any help pointing me in the right direction would be very much appreciated.

Here's the Javascript I've got so far:

ytplayer = document.querySelector('video');

ytplayer.pause();

ytplayer.currentTime = 0;

ytplayer.click();

ytplayer.play();

completion();

Answer 1

I'm not sure how the Siri Shortcuts with Apple TV work, so this might not apply, but if it's a similar layout as a computer browser, this code works for me for clicking the settings button and selecting a resolution in a web browser

let sleep = ms => new Promise(r => setTimeout(r, ms));

async function waitForVideo() {
    let video = document.querySelector('video');
    while (!video) {
        console.log('waiting for video');
        await sleep(200);
        video = document.querySelector('video');
    }
}

/**
 * Sets the quality
 * options are: "Highest" and the options available in the menu ("720p", "480p", etc.)
 */
async function setQuality(quality) {
    await waitForVideo();
    await sleep(1000);

    let settingsButton = document.querySelector('.ytp-settings-button');
    settingsButton.click();
    await sleep(500);

    let qualityMenu = document.querySelector('.ytp-panel-menu').lastElementChild;
    qualityMenu.click();
    await sleep(500);

    let qualityOptions = [...document.querySelectorAll('.ytp-menuitem')];
    let selection;
    if (quality === 'Highest') selection = qualityOptions[0];
    else selection = qualityOptions.filter((el) => el.innerText == quality)[0];

    if (!selection) {
        let qualityTexts = qualityOptions.map((el) => el.innerText).join('\n');
        console.log('"' + quality + '" not found. Options are: \n\nHighest\n' + qualityTexts);
        settingsButton.click(); // click the menu button to close it
        return;
    }

    selection.click();
}

setQuality('Highest');