Dmy*_*kyi 10 javascript youtube youtube-api
我正在使用iframe YouTube API,我想跟踪事件,例如,当用户启动和停止视频时,将数据发送到Google Analytics.
<iframe src="https://www.youtube.com/embed/DjB1OvEYMhY"></iframe>
我查看了https://developers.google.com/youtube/iframe_api_reference?csw=1,但未找到如何执行此操作的示例.该示例创建iframe并定义onReady和onStateChange.当我在页面上只有iframe时,我该怎么做？
ble*_*lex 13
此示例侦听用户使用onPlayerStateChange其不同状态进行的每个播放/暂停操作,并打印(记录)它们.
但是,您需要创建自己的record函数以使用此数据执行任何操作.
你还需要在你的iframe(一个ID #player在这种情况下),并添加？enablejsapi = 1在其网址的结尾.当然,请确保包含Youtube iframe API.
注意
在代码之后声明API非常重要,因为它onYouTubeIframeAPIReady在准备就绪时会调用.
<!DOCTYPE html>
<html>
<body>
<iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe>
<h5>Record of user actions:</h5>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player( 'player', {
events: { 'onStateChange': onPlayerStateChange }
});
}
function onPlayerStateChange(event) {
switch(event.data) {
case 0:
record('video ended');
break;
case 1:
record('video playing from '+player.getCurrentTime());
break;
case 2:
record('video paused at '+player.getCurrentTime());
}
}
function record(str){
var p = document.createElement("p");
p.appendChild(document.createTextNode(str));
document.body.appendChild(p);
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>
这是一个不使用 Youtubes iframe API 脚本的版本。唯一的缺点是 iframe API 可能会发生变化。
<iframe id="player" src="https://www.youtube.com/embed/dQw4w9WgXcQ?enablejsapi=1"></iframe>
var addYoutubeEventListener = (function() {
var callbacks = [];
var iframeId = 0;
return function (iframe, callback) {
// init message listener that will receive messages from youtube iframes
if(iframeId === 0) {
window.addEventListener("message", function (e) {
if(e.origin !== "https://www.youtube.com" || e.data === undefined) return;
try {
var data = JSON.parse(e.data);
if(data.event !== 'onStateChange') return;
var callback = callbacks[data.id];
callback(data);
}
catch(e) {}
});
}
// store callback
iframeId++;
callbacks[iframeId] = callback;
var currentFrameId = iframeId;
// sendMessage to frame to start receiving messages
iframe.addEventListener("load", function () {
var message = JSON.stringify({
event: 'listening',
id: currentFrameId,
channel: 'widget'
});
iframe.contentWindow.postMessage(message, 'https://www.youtube.com');
message = JSON.stringify({
event: "command",
func: "addEventListener",
args: ["onStateChange"],
id: currentFrameId,
channel: "widget"
});
iframe.contentWindow.postMessage(message, 'https://www.youtube.com');
});
}
})();
addYoutubeEventListener(document.getElementById("player"), function(e) {
switch(e.info) {
case 1:
// playing
break;
case 0:
// ended
break;
}
});
| 归档时间： |
|
| 查看次数： |
20518 次 |
| 最近记录： |