JavaScript и YouTube

[bobus123]

Скрипт получения длительности YouTube ролика без включенного API для канала.
Скрипт работает при загрузке страницы, подскажите как подправить чтоб скрипт работал при уже загруженной странице.
В идеале вставляю в инпут поле ссылку на YouTube ролик и на аяксе получаю в другом инпуте длительность этого ролика.

Демо:
_https://aerial-videos.com.au/tmp/index44.html

[bobus123]

<script>

 /* то, что грузит YouTube */
  if (!window['YT']) {var YT = {loading: 0,loaded: 0};}if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};}if (!YT.loading) {YT.loading = 1;(function(){var l = [];YT.ready = function(f) {if (YT.loaded) {f();} else {l.push(f);}};window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}};YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}};var a = document.createElement('script');a.type = 'text/javascript';a.id = 'www-widgetapi-script';a.src = 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vflWEkxrd/www-widgetapi.js';a.async = true;var c = document.currentScript;if (c) {var n = c.nonce || c.getAttribute('nonce');if (n) {a.setAttribute('nonce', n);}}var b = document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a, b);})();}

  /* ваш обработчик */
  var player;
  
  /* именно эта функция работает на этапе загрузки */
  function onYouTubeIframeAPIReady() {
    /* первым параметром вы передаёте id того блока, в котором будет размещён ifame с роликом, для каждого ролика это придётся инициализировать каждый раз */
    player = new YT.Player('player', {
      videoId: 'utgTLA7E7lo',
      events: {
        'onReady': onPlayerReady,
      }
    });
  }
  
  /* эта функция отработает только после загрузки ролика */
  function onPlayerReady(event) {
    document.getElementById("video-duration").value = 
      Math.floor(Number(event.target.getDuration()) / 60) + ':' + 
      (Number(event.target.getDuration()) % 60);
  }

    </script>

[Malleys]

В идеале вставляю в инпут поле ссылку на YouTube ролик и на аяксе получаю в другом инпуте длительность этого ролика.

Давайте сначала очистим ваш запрос от вещей, которые не имеют никакого смысла и только запутывают вас!

на аяксе

Я всё больше удивляюсь попыткам программировать на несуществующих вещах... В JavaScript нет такого! Я спрашивал у других программистов(C#, Java), поверьте, они они более чем уверены, что такое не нужно для того, чтобы сделать запрос к серверу! Кому вы хотите запудрить мозги своим «на аяксе»? Так и говорите, что вы хотите получить данные с сервера, а не «на аяксе»! Вы не можете послать AJAX-запрос. Но вы можете послать асинхронный HTTP-запрос, если вы хотите.

получаю в другом инпуте

Это так не работает... Интерфейс Fetch API никак не связан с интерфейсом Element, но если вы хотите вы можете написать код, который запишет результат запроса в какой-нибудь элемент! <input> в первую очередь предназначен для ввода данных от пользователя...

Я думаю, что вы хотели узнать это...

В идеале вставляю в инпут поле ссылку на YouTube ролик и... получаю ... длительность этого ролика.

<form onsubmit="getData(this); return false;" oninput="getData(this);">
	<input name="url" pattern=".*(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)?([a-zA-Z0-9_-]{11}).*" required spellcheck="false" placeholder="Введите адрес или идентификатор видео с YouTube, чтобы узнать его продолжительность">
	<output><span></span></output>
</form>

<script>
async function getData(form) {
	const key = "AIzaSyDYwPzLevXauI-kTSVXTLroLyHEONuF9Rw";
	const input = form.querySelector("[name=url]");
	const output = form.querySelector("output");
	
	try {
		if(!input.checkValidity()) throw new Error("Введите ссылку на видео в YouTube");
		const id = new RegExp(input.pattern).exec(input.value)[1];
		const response = await fetch(`https://www.googleapis.com/youtube/v3/videos?id=${id}&key=${key}&part=snippet,contentDetails`);
		const { items } = await response.json();
		
		if("0" in items === false) throw new Error("Видео не найдено");
		
		output.style.backgroundImage = `url(${items[0].snippet.thumbnails.default.url})`;
		output.innerHTML = `<span>${parseTime(items[0].contentDetails.duration)}</span>`;
		output.className = "ok";

		function parseTime(time) {
			const match = time.match(/^PT(?:(\d+)H)?(?:(\d{1,2})M)?(\d{1,2})S$/).slice(1).map(v => v || 0).map(Number);
			return `${60 * match[0] + match[1]}:${String(match[2]).padStart(2, "0")}`;
		}
	} catch(error) {
		output.className = "";
		output.style.backgroundImage = "";
		output.textContent = error.message;
	}
	
}
</script>
<style>

output.ok {
	width: 120px;
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1em;
	border-radius: 0.3em;
}

output.ok > span {
	color: white;
	background: rgba(0, 0, 0, 0.5);
	font: bold 1.5em system-ui;
	margin: 0.2em;
	padding: 0.1em 0.3em;
	border-radius: 0.2em;
	text-shadow: 0 2px black;
}

form {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

[name="url"] {
	all: unset;
	border-radius: 5px;
	padding: 0.5em;
	font: 1em system-ui;
	background: var(--bg-color, white);
	box-shadow: inset 0 0 0 2em var(--bg-color, white);
	color: var(--fg-color, black);
	-webkit-text-fill-color: var(--fg-color, black);
	border: 1px solid var(--fg-color, black);
	width: 90%;
	text-align: center;
}

[name="url"]:valid {
	--fg-color: #33691E;
	--bg-color: #F1F8E9;
}

[name="url"]:invalid:not(:placeholder-shown) {
	--fg-color: red;
	--bg-color: #ffeeee;
}

</style>

[рони]

Malleys,

[bobus123]

Браво, стоя хлопаю вам !