我的youtube嵌入式播放器在页面上破坏了其他事件侦听器时遇到问题。我特别使用Iframe API，因为我需要一个html5播放器，通常我想要的功能是将其嵌入到可拖动的对话框。
/*DRAGGING*****************************************/
//get offset and set dragging
header.onmousedown = preDrag;
document.onmouseup = function(e){
dragging = false;
};
//drag
document.onmousemove = drag;
ytplayer.onmousemove = drag;
function preDrag(){
offsetX = container.style.left - mouseX;
offsetY = container.style.top - mouseY;
//alert('left: ' + container.style.left +', top: ' + container.style.top);
//alert('offsetX: ' + offsetX + ', offsetY: ' + offsetY);
dragging = true;
}
function drag(){
if (dragging == true){
container.style.top = (mouseY + offsetY)+"px";
container.style.left = (mouseX + offsetX)+"px";
}
}
});
</script>
</head>
<body>
<p id="text"></p>
<div id="vidContainer">
<div id="vidHeader"></div>
<div id="vidPlayer"><div id='yt'></div></div>
<div id="vidPlaylist">
<ul id="videos">
</ul>
</div>
</div>
<!-- <a id="add" href="#" class="btn">Add to the playlist!</a> -->
<script>
/*YOUTUBE PLAYER API*************/
var player;
function onYouTubeIframeAPIReady(){
player = new YT.Player('yt', {
height: '390',
width : '640',
videoId: 'i3Jv9fNPjgk',
playerVars: {
"html5" : 1,
"enablejsapi" : 1,
},
events: {
'onReady' : onPlayerReady,
'onStateChange' : onPlayerStateChange,
}
});
}
function onPlayerReady(event){
event.target.playVideo();
}
function onPlayerStateChange(event){
}
function stopVideo(){
player.stopVideo();
}
function someFunc(){
alert('oh hey the first time!!!');
}
/*******************************/
</script>
</body>
此代码将允许用户单击标题(在视频上方)并将其拖动到四周，从而移动整个容器。问题在于，如果用户快速移动鼠标，则鼠标可能会移动到youtube视频所占据的区域中，从而停止拖动功能。这意味着
document.onmousemove没有被激活，因此为什么我认为youtube播放器正在取消文档事件。我已经尝试了两种解决方案:
ytplayer.onmousemove = drag，它完全失败。 events: { "onmouseover": "someFunc" }但这也失败了。
我有点主意，不知道该怎么办。有人可以帮忙吗？
最佳答案
不幸的是，由于浏览器的安全性，事件不会被iframe传播到应用程序，因此可以正常工作。您是否尝试检测用户何时进入/退出iframe来调整应用程序的行为？
关于html - YouTube嵌入式Iframe API会取消所有其他事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14698670/