Как использовать API IFrame Player в nuxt js - PullRequest
Новая
       8

Как использовать API IFrame Player в nuxt js

0 голосов
/ 18 апреля 2020

у меня есть следующий пустой код js код страницы, который я пытаюсь получить и использовать следующий API-интерфейс IFrame Player: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

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

<template>
    <div id="player">Playback Videos</div> 
</template>

<script>
export default {
   created(){
      var tag = document.createElement('script');
      tag.src ="https://www.youtube.com/iframe_api";
      var lastch= document.body.lastChild;
      console.log(lastch);
      lastch.parentNode.insertBefore(tag, lastch.nextSibling);
      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();
      }
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }

   }




}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: left ;
  align-items: left;
  text-align: left;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>
...