单击不同的播放按钮时如何更新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屋！