时间戳

首页 > 解决方案 > 动态更新网站上的 youtube 播放列表

iframe - 动态更新网站上的 youtube 播放列表

问题描述

好的，我正在尝试开发一个包含 youtube 播放列表的网站。稍后，每个访问该网站的人（在我的本地网络中）都应该可以将歌曲添加到该播放列表中。我将为此使用 youtube-api 和可能的 php 或 python。

现在我通过<iframe>标签包含播放列表并偶然发现了一个大问题。如果我现在向这个播放列表添加更多歌曲（通过 youtube 本身），它们当然只会在我重新加载完整网站时添加到我网站上的播放列表中。如果我只是用<iframe>例如重新加载 div，问题是播放列表从第一首歌曲重新开始。

有没有办法可以动态更新我网站上的播放列表？这样播放列表就不会从头开始，当前播放仍然存在，新添加的歌曲实际上是“现场”添加到播放列表中的？

<iframe>如果有帮助，请在此处标记：

<iframe id="playlist" src="https://www.youtube.com/embed/videoseries?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2"
        frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>

标签： iframeyoutubeyoutube-apiplaylist

解决方案

我建议的一个方法是：

  • （在更新包含 的 div 之前iframe，您需要获取当前正在播放的视频和正在播放的视频的当前时间。1

（一旦您将视频添加到播放列表并获得我在前几行中提到的值），更新 div 元素（通过修改src您的值iframe）。

一个例子可能是这样的：

  • 您有一个 id 为的播放列表：PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2。
  • 当前播放的视频是：51iquRYKPbs
  • 当您右键单击正在播放的视频51iquRYKPbs时，您将获得该Copy URL video at current time选项。
  • 选择该Copy URL video at current time选项后，您将获得如下 URL：

youtu.be/51iquRYKPbs ?list= PLmdXGEzOwfzb0fq7S2iP -t4i7x19R1ZN2& t=80

检查突出显示的值 - 您将需要它们来重新加载您的iframe.

您当前的 iframesrc值如下：

https://www.youtube.com/embed/videoseries?list=PLmdXGEzOwfzb0fq7S2iP-t4i7x19R1ZN2

（还没有修改）。

要使用应用的更改重新加载 iframe，请按如下方式设置 iframe src：

https://www.youtube.com/embed/51iquRYKPbs?list=PLZCHH_4VqpRhMW1K9I1hbgBRmmlWdyK3k&autoplay=1&start=80

（一旦您更改了srciframe 的值，它将重新加载所做的更改，并在指定时间内继续播放视频）。

接下来解释对值所做的更改src：

  • 设置正在播放的视频的 videoId 值（在完成重新加载之前）。
  • 设置视频在指定时间继续播放的起始值。
  • 在autoplay=1指定时间播放视频是必需的。

1关于如何获取当前正在播放的视频和播放视频的当前时间是一个全新的问题，这将取决于您处理网站中所有 YouTube 内容的语言 - （因为您在问题中提到您将使用 php 或 python)。

推荐阅读