Html Youtube嵌入的Iframe api取消所有其他事件_Html_Youtube_Youtube Api_Youtube Javascript Api

Html Youtube嵌入的Iframe api取消所有其他事件

html youtube youtube-api

Html Youtube嵌入的Iframe api取消所有其他事件,html,youtube,youtube-api,youtube-javascript-api,Html,Youtube,Youtube Api,Youtube Javascript Api,youtube embedded player破坏了我页面上的其他事件侦听器，我遇到了一个问题。我特别使用Iframe API，因为我需要一个html5播放器，通常我想要的功能是将它嵌入到一个可拖动的对话框中 /*DRAGGING*****************************************/ //get offset and set dragging header

youtube embedded player破坏了我页面上的其他事件侦听器，我遇到了一个问题。我特别使用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>

/*拖动**************************************************/
//获取偏移量并设置拖动
header.onmousedown=preDrag；
document.onmouseup=函数（e）{
拖动=假；
}; 
//拖
document.onmousemove=拖动；
ytplayer.onmousemove=拖动；
函数preDrag（）{
offsetX=container.style.left-mouseX；
offsetY=container.style.top-mouseY；
//警报（'left:'+container.style.left+'，top:'+container.style.top）；
//警报（'offsetX:'+offsetX+'，offsetY:'+offsetY）；
拖动=真；
}
函数拖动（）{
如果（拖动==true）{
container.style.top=（mouseY+offsetY）+“px”；
container.style.left=（mouseX+offsetX）+“px”；
}
}
}); 



/*YOUTUBE播放器API************/
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'YT'，{
高度：“390”，
宽度：“640”，
videoId:'i3Jv9fNPjgk'，
playerVars：{
“html5”：1，
“enablejsapi”：1，
},  
事件：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange，
} 
}); 
} 
函数onPlayerReady（事件）{
event.target.playVideo（）；
}           
函数onPlayerStateChange（事件）{
}
函数stopVideo（）{
player.stopVideo（）；
}
函数someFunc（）{
警惕（“哦，嘿，第一次！！！”）；
}
/*******************************/

此代码允许用户单击标题（视频上方）并将其拖动，从而移动整个容器。问题是，如果用户快速移动鼠标，鼠标可能会移动到youtube视频占据的区域，从而停止拖动功能。这意味着

document.onmousemove

没有被激活，因此我认为youtube播放器正在取消文档事件

我尝试了两种解决方案：

为youtube播放器创建一个包装器div，并将事件侦听器附加到它：这是

ytplayer.onmousemove=drag

，它完全失败

将事件侦听器附加到中的youtube视频播放器对象

事件：{“onmouseover”：“someFunc”}

但这也失败了

我有点不知所措，不知道该怎么办。有人能帮忙吗

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