订阅 Youtube 频道时获取特定 div 的 ID
Get the ID of a specific div when subscribing to a Youtube channel
我需要在用户订阅或取消订阅时显示 Youtube 频道的名称。
下面是两个订阅按钮和一个事件脚本。
<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>
您可以使用以下代码:
var divs = $('div#chan-1').attr('id');
获取 <div id="chan-1">
的 ID。
一个 JS Bin 示例:http://jsbin.com/mazasegawu/edit?html,output
您可以通过多种方式完成此操作。
将有效负载参数中传递的外部 ID 与通道 ID 匹配
payload
参数包含 channelExternalId
,其中包含该频道的 youtube id。您可以保留要显示的频道的外部 ID 列表,以及 ytevent 何时触发匹配 channelExternalId
到正确的频道名称
var channelNamesById = {
"UCY30JRSgfhYXA6i6xX1erWg":"SMOSH",
"UCE_M8A5yxnLfW0KghEeajjw":"Apple"
};
function onYtEvent(payload){
var channelName = channelNamesById[payload.channelExternalId];
}
有几种获取频道 ID 的方法,see here
动态创建按钮,并将频道名称.bind传递给 ytevent 回调函数,该函数会将频道名称作为参数传递
api 还允许您动态创建按钮。当您以这种方式创建按钮时,您可以将频道名称传递给回调函数
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 请求以获取频道详细信息,其中应包括其名称,但由于您已经在代码中获得了频道名称,因此我没有涵盖那个选项。 api for channels
我需要在用户订阅或取消订阅时显示 Youtube 频道的名称。
下面是两个订阅按钮和一个事件脚本。
<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>
您可以使用以下代码:
var divs = $('div#chan-1').attr('id');
获取 <div id="chan-1">
的 ID。
一个 JS Bin 示例:http://jsbin.com/mazasegawu/edit?html,output
您可以通过多种方式完成此操作。
将有效负载参数中传递的外部 ID 与通道 ID 匹配
payload
参数包含channelExternalId
,其中包含该频道的 youtube id。您可以保留要显示的频道的外部 ID 列表,以及 ytevent 何时触发匹配channelExternalId
到正确的频道名称var channelNamesById = { "UCY30JRSgfhYXA6i6xX1erWg":"SMOSH", "UCE_M8A5yxnLfW0KghEeajjw":"Apple" }; function onYtEvent(payload){ var channelName = channelNamesById[payload.channelExternalId]; }
有几种获取频道 ID 的方法,see here
动态创建按钮,并将频道名称.bind传递给 ytevent 回调函数,该函数会将频道名称作为参数传递
api 还允许您动态创建按钮。当您以这种方式创建按钮时,您可以将频道名称传递给回调函数
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 请求以获取频道详细信息,其中应包括其名称,但由于您已经在代码中获得了频道名称,因此我没有涵盖那个选项。 api for channels