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

我遇到了一个问题，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，并将事件侦听器附加到其中：这是ytplayer.onmousemove = drag，它完全失败了。
将事件侦听器附加到中的youtube视频播放器对象
events: { "onmouseover": "someFunc" }
但这也失败了。

我有点没主意，不知道该怎么办。有人能帮忙吗？

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

相关内容

最新更新

热门标签：