Socket.io не подключается и не выдает в IFrame API YouTube onStateChange - PullRequest
0 голосов
/ 26 апреля 2020

Я использую YouTube IFrame API и Flask socket.io для встраивания и управления видео YouTube. С помощью следующего кода connectAndEmmit() будет выполнен, и я увижу отправленные и полученные сообщения. Проблема заключается в том, что когда я пытаюсь позвонить connectAndEmmit() из onPlayerStateChange() или ссылаться прямо так:

let player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player("player", {
    height: "390",
    width: "640",
    videoId: "M7lc1UVf-VE",
    events: {
      onReady: onPlayerReady,
      onStateChange: () => socket.on("connect", function () {
        console.log("sent");

        socket.emit("controls-changed", {
          data: "content emmitted",
        });
      }),
    },
  });
}

И то, и другое ничего не даст или не получит.

Ниже приведен рабочий JS файл. Когда я перемещаю connectAndEmmit() внутрь onPlayerStateChange(), ничего не излучается.

let socket = io.connect("http://" + document.domain + ":" + location.port);
function connectAndEmmit() {
  socket.on("connect", function () {
    console.log("sent");

    socket.emit("controls-changed", {
      data: "content emmitted",
    });
  });
}

socket.on("my response", function (msg) {
  console.log("received", msg);
});

let tag = document.createElement("script");

tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

let player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player("player", {
    height: "390",
    width: "640",
    videoId: "M7lc1UVf-VE",
    events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange,
    },
  });
}

function onPlayerReady(event) {
  //event.target.playVideo();
}

$("form").on("submit", function (e) {
  e.preventDefault();
  let videoId = $("input.youtube-url")
    .val()
    .match(/v=(.+)/)[1];

  console.log(videoId);
  player.loadVideoById(videoId);
});

function onPlayerStateChange(event) {
  if (
    event.data === YT.PlayerState.PLAYING ||
    event.data === YT.PlayerState.PAUSED
  ) {
    console.log("state", event.target.getPlayerState());
    console.log("time", event.target.getCurrentTime());
  }
}

connectAndEmmit();

Наконец, что интересно, когда я останавливаю локальный сервер и перезагружаюсь, я вижу все ожидаемые выбросы. Но опять же не вижу их, когда все работает при звонке изнутри onPlayerStateChange()

enter image description here

...