gpt4 book ai didi

html - YouTube嵌入式Iframe API会取消所有其他事件

转载 作者:行者123 更新时间:2023-12-03 05:42:29 26 4
gpt4 key购买 nike

我的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播放器正在取消文档事件。

我已经尝试了两种解决方案:
  • 为youtube播放器创建一个包装器div,并将事件侦听器附加到该包装器div:这是ytplayer.onmousemove = drag,它完全失败。
  • 将事件侦听器附加到的youtube视频播放器对象中
    events: { "onmouseover": "someFunc" }
    但这也失败了。

  • 我有点主意,不知道该怎么办。有人可以帮忙吗?

    最佳答案

    不幸的是,由于浏览器的安全性,事件不会被iframe传播到应用程序,因此可以正常工作。您是否尝试检测用户何时进入/退出iframe来调整应用程序的行为?

    关于html - YouTube嵌入式Iframe API会取消所有其他事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14698670/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com