YouTube iframe API не запускает события внутри обычного веб-компонента - PullRequest
Новая
       8

YouTube iframe API не запускает события внутри обычного веб-компонента

0 голосов
/ 05 января 2019

У меня есть небольшое решение для цифровых вывесок, одно из требований - внедрить видео на YouTube. Я сделал это для одного видео - пока все хорошо. Я хочу, чтобы мои слайды могли содержать несколько видео, я хочу сделать это с помощью веб-компонентов, так как тогда я могу изолировать переменные JS (верно?).

Когда я работаю в контексте полной страницы, все работает так, как задумано. Я скопировал код в небольшой веб-компонент, но теперь мои события не вызываются.

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

Разметка для страницы: 

  <div class="slide" data-slidetype="youtube">
    <app-medianyoutube></app-medianyoutube>
  </div>

JS-код для веб-компонента (функция на YouTubeIframeAPIReady никогда не вызывается). 

//usage: <app-medianyoutube video=''></app-medianyoutube>
class MedianYoutube extends HTMLElement {
  constructor() {
    super();
    console.log("constructor youtubeslide");
    //var videoId = this.getAttribute("video");
    //creates the player div to show the video
    var maindiv = document.createElement("div");
    maindiv.id = "player";

    var tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    this.appendChild(maindiv);
    this.appendChild(tag);

    //this is the player and the function that is being called when the API is ready
    var player;
    function onYouTubeIframeAPIReady() {
      console.log("on youtubeiframe api ready");
      player = new YT.Player("player", {
        height: "100%",
        width: "100%",
        videoId: "aQAEkgxNaQs",
        events: {
          onReady: onPlayerReady,
          onStateChange: onPlayerStateChange
        }
      });
    }

    //handles when the player sends a message that it is ready for playback
    function onPlayerReady(event) {
      console.log("onPlayerReady");
      event.target.playVideo();
    }

    //handles when the player sends a message that it is changing state
    function onPlayerStateChange(event) {
      console.log("onPlayerStateChange: " + event);
      if (event.data == YT.PlayerState.ENDED) {
        player.seekTo(0);
        player.stopVideo();
        showNextSlide();
        done = true;
      }
    }
  }
}
//register the component
customElements.define("app-medianyoutube", MedianYoutube);
...