Question

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

我这样获取数据：

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链接中的变量。

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}`

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

您正像这样在getData函数中使用它：

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

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

使用AJAX将videoID放置在iframe中

1 个答案: