使用 AJAX 在 iframe 中放置视频 ID

Question

我正在尝试通过 AJAX 显示我的一个播放列表中的 YouTube 视频，但我无法真正用我获取的数据替换 iframe 中的视频 ID。

我是这样获取数据的：

const apiKey = 'MY_API_KEY'
const playlistId = "MY_PLAYLIST_ID"
const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=${playlistId}&key=${apiKey}`

const getData = function () {
 return fetch(url)
   .then(response => response.json())
   .then(data => {
     return data.items.map(playlist => {
        return {
          videoId: playlist.snippet.resourceId.videoId
        }
      })
    })
}

现在我想测试是否可以将其中一个 videoId 放到我的 iframe 上，所以我尝试将它放入我的其中一个部分，如下所示：

const playerTag = document.querySelector(".player")

const putVideoOn = function () {
  playerTag.innerHTML = ""
  playerTag.innerHTML = playerTag.innerHTML + `
  <div class="player-video">
   <iframe width="480" height="360" src="https://www.youtube.com/embed/${data.videoId}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
 `
}

// then I ran the function on load

putVideoOn()

但我总是收到一个错误，说我注入 iframe link 的变量未定义。

Answer 1

我没有在任何地方看到 data 变量定义：

const apiKey = 'MY_API_KEY'
const playlistId = "MY_PLAYLIST_ID"
const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=${playlistId}&key=${apiKey}`

您在 putVideoOn 函数的 URL 中使用了 ${data.videoId}，但我没有看到 data 变量的定义位置。

您只是在 getData 函数中使用它，如下所示：

return data.items.map(playlist => {
    return {
      videoId: playlist.snippet.resourceId.videoId
}

但是您没有在变量 data 中保存任何内容，因为它可能不存在

使用 AJAX 在 iframe 中放置视频 ID

Placing a videoID in an iframe using AJAX

javascript

youtube

ajax

youtube-api

youtube-data-api