Question

我遇到了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" }

但也失败了。

我有点想法，我不知道该怎么做。有人可以帮忙吗？

Answer 1

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

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

1 个答案: