TypeError YT Iframe API

Вопрос-ответ JavaScript
1

Может, кто-то сталкивался с такой ошибкой и подскажет, как её пофиксить: у меня на странице есть iframe видео с YouTube. По их руководству (по примеру) я подключаю к нему код YT Iframe API. Всё работает, однако периодически в консоли возникает ошибка:
Скриншот 07-08-2024 000911
Все файлы, на которых ссылается консоль, не мною писаны, это файлы, как я понимаю, API. Я заметил, что она возникает (и то не каждый раз) при клике по кнопке “старт/пауза” видео.

Для чистоты эксперимента я тупо скопировал весь код с их руководства - та же ошибка имеет место и так же не каждый раз при старте/паузе видео она появляется. Я не нашёл на просторах Интернета решение.

2

Есть возможность дать ссылку на страницу чтобы можно было потыкать в нее, посмотреть дебаггер?

Точных причин не знаю. Появляется только одна идея. Где-то где ожидается объект туда передается (или уже лежит, например в переменной) null или undeinfed. Значит надо глянут может где-то ожидается обязательный параметр а он не передается или какая-то глобальная переменная (которая например появляется только если подключить их js библиотеку) не объявлена в момент вызова кода.

3

Дима, привет! Вот код - просто вставь его в твой редактор и запусти. Это пример с сайта YT:


<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <style>
    iframe {
      border-width: 30px;
    }
  </style>
</head>

<body>
  <iframe id="myVid" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
    style="border: solid 24px #37474F"></iframe>

  <script src="https://www.youtube.com/iframe_api"></script>
  <script>
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player("myVid", {
        events: {
          onReady: onPlayerReady,
          onStateChange: onPlayerStateChange,
        },
      });
    }
    function onPlayerReady(event) {
      document.getElementById("myVid").style.borderColor = "#FF6D00";
    }
    function changeBorderColor(playerStatus) {
      var color;
      if (playerStatus == -1) {
        color = "#37474F"; // unstarted = gray
      } else if (playerStatus == 0) {
        color = "#FFFF00"; // ended = yellow
      } else if (playerStatus == 1) {
        color = "#33691E"; // playing = green
      } else if (playerStatus == 2) {
        color = "#DD2C00"; // paused = red
      } else if (playerStatus == 3) {
        color = "#AA00FF"; // buffering = purple
      } else if (playerStatus == 5) {
        color = "#FF6DOO"; // video cued = orange
      }
      if (color) {
        document.getElementById("myVid").style.borderColor = color;
      }
    }
    function onPlayerStateChange(event) {
      changeBorderColor(event.data);
    }
  </script>
</body>

</html>

Подчёркиваю, что эта ошибка появляется не сразу и не каждый раз, но если видео несколько раз потыкать - на нём и за его пределами (например, когда есть ещё одно видео, но и при одном тоже), покликать быстро, она появится. Причём если один раз ошибка появилась, то дальше она появляется куда более охотно.

Я понимаю её суть - то, что ты описал выше, но, учитывая, что пользовательского кода там кот наплакал, а основное - это YT-библиотека, то понять трудно, что и кого не получает, что скатывается в catch промиса. Он указывает на одну из тысяч строк, при этом минифицированного кода с названием переменных и объектов из 1 буквы.

4

Привет. Извини за задержку ответа и спасибо за инструкции.

Я попробовал разные вариации запустить и “поиграться” с этим кодом. Запускал прямо файл, запускал через веб сервер, смотрел хром, сафари, пробовал тормозить интернет, пробовал с и без блокировщиков. Не получилось воспроизвести поведение. Когда не получается воспроизвести, то и советы-идеи будут спекулятивного уровня.

5

Привет! Я в любом случае признателен тебе за внимание к моим вопросам и попыткам решения их, независимо от задержки или её отсутствия - как видишь, я не всегда и сам сразу отвечаю. Странный баг… Наверное, попробую переустановить браузер или пока не буду внимания обращаться на него, раз у других он не воспроизводится ). Ещё раз благодарю за тест )

1 лайк