Javascript 如何在单击不同的播放按钮时更新YouTube视频ID

我有一个视频源。当用户单击播放按钮时，我希望将特定的视频ID加载到YouTube API中的videoID变量中。现在，我已经成功地对站点进行了编程，以便在每次单击播放按钮时开始播放视频，但是，ID（编辑帖子时使用ACF

$video\u ID

指定为自定义字段）不会更新。下面是我的提要的外观：

我已经尝试添加查看

播放器。loadVideoById

，但运气不太好

以下是我的YouTube API代码：

function onYouTubeIframeAPIReady() {
    player = new YT.Player("player", {
        videoId: "HoVWmW0Zdmo",
        playerVars: {
            controls: '0',
            html5: '1',
            cc_load_policy: '0',
            disablekb: '1',
            iv_load_policy: '3',
            modestbranding: '1',
            showinfo: '0',
            rel: '0',
            autoplay: '0',
        },
        events: {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange
        }

    });
}

//the id placed below is just a sample id to see if I could even get the ID to change...which I couldnt
jQuery(".media-circle").on("click", function() {
        player.loadVideoById("Vw4KVoEVcr0");
    });

下面是播放按钮的HTML片段。类

.media circle

是圆形，包含覆盖相册插图的播放暂停按钮

<div class="album-dark-overlay play">
    <div class="media-circle">
        <i class="icon ion-ios-play"></i><i class="icon ion-pause"></i>
    </div>
</div>

---

我是否必须提取post ID以便javascript知道要查找哪个videoID？

如果使用

player.loadVideoById（“Vw4KVoEVcr0”）它将播放视频
Vw4KVoEVcr0

由于您有一个
onclick
事件监听器，用于包含
media circle
组的所有元素，因此每次单击该元素时，它将继续加载相同的视频
ID
，除非您告诉它播放不同的
ID

当您构建视频结果/列表时，您需要告诉它在运行该功能时应该播放什么视频
ID
。如果您为每个
媒体圈
提供一个
ID
以匹配它应该播放的视频，您可以针对触发函数更改/加载新视频的元素的
ID


这里有一个例子。我已将图像的
ID
设置为视频
ID
，单击时应播放该视频。你可以看到他们都共享同一个
媒体圈
类

演示源代码

HTML

<div id="player"></div><hr/>
<img id="ovrGzbsQZqc" class="media-circle" src="http://i.ytimg.com/vi/ovrGzbsQZqc/0.jpg"/>Pegboard Nerds - Emoji VIP [Monstercat Official Music Video]<br>
<img id="YnwsMEabmSo" class="media-circle" src="http://i.ytimg.com/vi/YnwsMEabmSo/0.jpg"/> Marshmello - Alone [Monstercat Official Music Video]<br>
<img id="-7Ok0O2nQaA" class="media-circle" src="http://i.ytimg.com/vi/-7Ok0O2nQaA/0.jpg"/> Pegboard Nerds - Melodymania [Monstercat EP Release]<br>

CSS

img{max-height:100p;max-width:150px;}

如果您对上面的源代码有任何疑问，请在下面留下评论，我会尽快回复您

我希望这有帮助。快乐编码
 如果使用player.loadVideoById（“Vw4KVoEVcr0”）它将播放视频
Vw4KVoEVcr0

由于您有一个
onclick
事件监听器，用于包含
media circle
组的所有元素，因此每次单击该元素时，它将继续加载相同的视频
ID
，除非您告诉它播放不同的
ID

当您构建视频结果/列表时，您需要告诉它在运行该功能时应该播放什么视频
ID
。如果您为每个
媒体圈
提供一个
ID
以匹配它应该播放的视频，您可以针对触发函数更改/加载新视频的元素的
ID


这里有一个例子。我已将图像的
ID
设置为视频
ID
，单击时应播放该视频。你可以看到他们都共享同一个
媒体圈
类

演示源代码

HTML

<div id="player"></div><hr/>
<img id="ovrGzbsQZqc" class="media-circle" src="http://i.ytimg.com/vi/ovrGzbsQZqc/0.jpg"/>Pegboard Nerds - Emoji VIP [Monstercat Official Music Video]<br>
<img id="YnwsMEabmSo" class="media-circle" src="http://i.ytimg.com/vi/YnwsMEabmSo/0.jpg"/> Marshmello - Alone [Monstercat Official Music Video]<br>
<img id="-7Ok0O2nQaA" class="media-circle" src="http://i.ytimg.com/vi/-7Ok0O2nQaA/0.jpg"/> Pegboard Nerds - Melodymania [Monstercat EP Release]<br>

CSS

img{max-height:100p;max-width:150px;}

如果您对上面的源代码有任何疑问，请在下面留下评论，我会尽快回复您

我希望这有帮助。快乐编码
 这就是我现在有点困惑的地方。我使用的是一个自定义字段，用户在编辑帖子时添加videoID。然后我将其转换成一个php$video\u id=get\u字段（“video\u id”）
media circle
是环绕播放按钮的圆圈。因此，当用户单击圆圈区域的任何位置时，播放按钮（圆圈内）就会切换到暂停按钮（我已经成功完成了这一部分）。我还设法在切换播放按钮时触发一个视频开始播放，而不是链接到@NewToJSHow上单击的特定帖子的视频。您是否正在传递新视频
ID
？它与被点击的
媒体圈
元素有何关系？您需要传递新的视频
ID
，以便播放器知道播放什么。此时，您告诉它每次单击
media circle
时播放相同的视频。为什么不给
media circle
一个
ID
你可以将他
ID
设置为视频ID，这样当你
media circle
点击时，你就可以定位该元素的ID，播放器就会知道播放哪个视频了。。。示例
player.loadVideoById（this.id）
@NewToJS我对
loadVideoByID
的理解是，它使用的参数是视频的id（一个随机字符字符串），而不是html元素的id？这个html元素如何链接到帖子中的视频？如果使用
player.loadVideoById（“Vw4KVoEVcr0”）它将播放视频
Vw4KVoEVcr0
。由于您有一个onclick eventlistener，用于所有元素和
media circle
组，因此每次单击该元素时，它将继续加载相同的视频
ID
，除非您告诉它播放不同的
ID
。当您构建视频结果/列表时，您需要告诉它在运行该功能时应该播放什么视频
ID
。如果您为每个
媒体圈
提供一个
ID
以匹配它应该播放的视频，您可以针对触发函数更改/加载新视频的元素的
ID
。以下是一个示例。我已将图像的ID设置为单击时应播放的视频ID。你可以看到他们都共享同一个
媒体圈
类。这就是我现在有点困惑的地方。我使用的是一个自定义字段，用户在编辑帖子时添加videoID。然后我将其转换成一个php$video\u id=get\u字段（“video\u id”）
media circle
是环绕播放按钮的圆圈。因此，当用户单击圆圈区域中的任何位置时，播放按钮（内部