我需要在用户订阅或取消订阅时显示 Youtube channel 的名称。
下面是两个订阅按钮和一个事件脚本。
<script src="https://apis.google.com/js/platform.js"></script>
<div id="chan-1" class="g-ytsubscribe" data-channel="SMOSH" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
</div>
<div id="chan-2" class="g-ytsubscribe" data-channel="Apple" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
</div>
<script>
function onYtEvent(payload) {
if (payload.eventType == 'subscribe') {
// Need to display subscribed channel name
} else if (payload.eventType == 'unsubscribe') {
// Need to display unsubscribed channel name
}
if (window.console) { // for debugging only
window.console.log('YT event: ', payload);
}
}
</script>
最佳答案
您可以通过多种方式完成此操作。
将有效负载参数中传递的外部 ID 与 channel ID 相匹配
payload
参数包含channelExternalId
,其中包含该 channel 的 youtube id。您可以保留要显示的 channel 的外部 ID 列表,以及当 ytevent 触发时将channelExternalId
匹配到正确的 channel 名称var channelNamesById = { "UCY30JRSgfhYXA6i6xX1erWg":"SMOSH", "UCE_M8A5yxnLfW0KghEeajjw":"Apple" }; function onYtEvent(payload){ var channelName = channelNamesById[payload.channelExternalId]; }
有几种方法可以获取 channel ID,see here
动态创建按钮,.bind ytevent 回调函数的 channel 名称,它将 channel 名称作为参数传递
该 API 还允许您动态创建按钮。当您以这种方式创建按钮时,您可以将 channel 名称传递给回调函数
HTML
<div id="chan-1"></div> <div id="chan-2"></div>
JS
gapi.ytsubscribe.render( document.querySelector("#chan-1"), { "channel": "SMOSH", "layout": "default", "count":"default", "onytevent":onYtEvent.bind(null,"SMOSH") } ); gapi.ytsubscribe.render( document.querySelector("#chan-2"), { "channel": "Apple", "layout": "default", "count":"default", "onytevent":onYtEvent.bind(null,"Apple") } ); function onYtEvent(channelName,payload) { console.log(channelName); }
您还可以使用 api 执行 ajax 请求以获取 channel 详细信息,其中应包括其名称,但由于您已经在代码中获得了 channel 名称,因此我没有涵盖该选项。 api for channels
关于javascript - 订阅 Youtube channel 时获取特定 div 的 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32925495/