单击不同的播放按钮时如何更新YouTube视频ID [英] How to update YouTube video ID when clicking different play buttons
问题描述
我有一个完整的视频供稿.当用户单击播放按钮时,我希望将特定的视频ID加载到YouTube API中找到的videoID变量中.现在,我已经设法对站点进行编程,以便每次单击播放按钮时就开始播放视频,但是ID(在编辑帖子时使用ACF $video_id
指定为自定义字段)不会更新.这是我的供稿的样子:
I have a feed full of videos. When a user clicks on a play button, I want that specific video ID to be loaded into the videoID variable found in the YouTube API. Right now, I have managed to program the site to start playing a video for each time the play button is clicked, however, the ID (that is specified as a custom field using ACF $video_id
when editing the post) does not update. Here's what my feed looks like:
我尝试添加查看player.loadVideoById
的方法,但是运气不太好.
I've tried adding looking at the player.loadVideoById
but haven't had much luck.
这是我的YouTube API代码:
Here is my YouTube API code:
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
是圆形,其中包含覆盖专辑插图的播放暂停按钮.
Here is a HTML snippet of the play button. the class .media-circle
is the round shape containing the playpause button that overlays the album artwork.
<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>
我是否必须提取帖子ID,以便javascript知道要查找哪个videoID?
Do I have to pull the post ID so that javascript knows which videoID to look for?
推荐答案
如果您使用player.loadVideoById("Vw4KVoEVcr0");
,它将播放视频Vw4KVoEVcr0
.
If you use player.loadVideoById("Vw4KVoEVcr0");
it will play the video Vw4KVoEVcr0
.
由于您每次对具有media-circle
组的所有元素都有一个onclick
事件监听器,因此除非您告诉它播放不同的ID
,否则它将继续加载相同的视频ID
.
Since you have an onclick
event listener for all elements with the group of media-circle
each time you click that element it will continue to load the same video ID
unless you tell it to play a different ID
.
构造视频结果/列表时,您需要告诉它在运行该功能时应播放什么视频ID
.如果为每个media-circle
提供一个ID
来匹配应播放的视频,则可以定位触发该功能以更改/加载新视频的元素的ID
.
When you construct the video results/list you need to tell it what video ID
should play when that function is run. If you give each media-circle
an ID
to match the video it should play you can target the ID
of the element that triggers the function to change/load the new video.
这里是一个例子.我已将图像的ID
设置为单击时应播放的视频ID
.您可以看到它们共享相同的media-circle
类. JsFiddle演示
Here is an example. I have set the ID
of the images to the video ID
it should play when clicked. You can see all of them share the same media-circle
class. JsFiddle Demo
演示源代码
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>
Javascript/jQuery
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '200',
width: '350',
videoId: 'HoVWmW0Zdmo',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
$(function() {
jQuery(".media-circle").on("click", function() {
player.loadVideoById(this.id);
});
});
CSS
img{max-height:100p;max-width:150px;}
如果您对上面的源代码有任何疑问,请在下面留下评论,我会尽快与您联系.
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
我希望这会有所帮助.编码愉快!
I hope this helps. Happy coding!
这篇关于单击不同的播放按钮时如何更新YouTube视频ID的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!