- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试通过 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()
但我总是收到一条错误消息,指出我注入(inject)到 iframe
链接中的变量未定义。
最佳答案
我在任何地方都没有看到 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
中保存任何内容,因为它可能不存在
关于javascript - 使用 AJAX 将 videoID 放入 iframe 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52853775/
我目前正在使用它来查询第一个匹配deadmau5的视频: https://gdata.youtube.com/feeds/api/videos?q=deadmau5&v=2&alt=json&max-
我想使用 YT.Player 代码以便可以检测事件。我有一个包含 Youtube 视频 ID 的 CSV 文件和一个将 ID 放入数组中的函数,并且希望能够在用户单击图像时动态更改 ID。本质上是这样
我有一个 js 函数,它从 channel 返回一个随机 VideoID。我想将此 ID 动态插入到 youtubeAPI 的 videoID 参数中。 // 3. This function cre
我正在尝试设置一个 videoId 数组,以便能够选择随机加载。我尝试将视频数组添加为 videoId,但没有成功。我是一个 JS 新手,所以我不太确定我应该为此传递什么。我到目前为止: func
我尝试通过 Javascript Regex 获取 Vimeo 视频的 id。但是,输出将是:http://vimeo.com/169473112,169473112 如何访问逗号后的所有内容? ht
在使用模拟器时,我注意到当尝试查看 YouTube 视频时,浏览器会出错,提示它无法加载位于 vnd.youtube:ngc978y6rCU?some=parameters 的页面。我没有 Andro
我正在使用 Zend GData 库在我的应用程序中管理 YouTube 视频。该应用程序使用户能够根据需要选择将上传的视频添加到他们预先存在的 YouTube 播放列表之一。一个问题是,如果视频随后
我已经为此苦苦挣扎了几个小时,我不知道为什么不起作用。我需要使用 YouTube API 和 Zend 从 VideoID 获取详细信息,所以我创建了一个这样的函数 function listYout
我正在尝试使用其API加载Youtube的搜索结果。 到目前为止看起来一切正常,但有时会出现此错误 ActionView::Template::Error (undefined method `vid
我构建了一个 iOS 应用程序来显示搜索项目的视频,出现的问题如下: 我使用了 YouTube 数据 API 并提取了 videoId。 我无法将其添加到 AVPlayer(但是当使用 YouTube
我遇到了异步方法的问题,该方法打印并返回所有 vidDuration 值,然后为每个 videoId 放置 viewCount 值,但 vidDuration 仅重复收到的最后一个值并将其分配给所有
尝试使用我当前拥有的程序,但无法从搜索查询中查看videoID。 我现在有以下代码: function makeRequest() { var q = $('#query').val();
我正在尝试通过 AJAX 显示我的播放列表之一中的 YT 视频,但我无法真正用我获取的数据替换 iframe 中的 videoID。 我这样获取数据: const apiKey = 'MY_API_K
我正在开发 Android 应用程序,该应用程序应该从 YouTube 检索有关电影的信息,因此我决定使用 google-api-client 库来实现此功能。 我想仅使用电影标题来获取 videoi
演示: http://codepen.io/mistkaes/pen/6b6a347c7d24edee15b3491420db4ecd?editors=011 因此,我有一个具有基本搜索功能的演示..
使用 YouTube Stream Now API 是否有任何方法可以获取默认流将被上传为 (NOT DEFAULT STREAM ID) 的视频 ID,因此您可以创建一个 url 来播放它... y
我正在使用 Ionic 3 和 Angular 5。我将 Youtube 视频嵌入到我的应用程序中,为此,我正在使用 ngx-youtube-player .但它给了我错误: Template par
我是 React 初学者,所以对我放宽点.. 我现在正在制作一个非常非常基本的应用程序,稍后我将对其进行扩展.. 现在我只是想让 React 从 Youtube 中拉取带有 channel 数据的 J
我看过Youtube Api v3对于 Android,我可以通过 Video Id 获取有关 Youtube Video 的大部分信息。然而,在 google 中搜索了很多之后,似乎无法使用 Api
这是获取视频信息的 url,您必须在其中放置 VIDEO-ID 和 API-KEY: https://www.googleapis.com/youtube/v3/videos?part=snippet
我是一名优秀的程序员,十分优秀!