1

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

我已经尝试了两种解决方案：

  1. 为 youtube 播放器创建一个包装 div 并将事件侦听器附加到它：这就是ytplayer.onmousemove = drag它，它完全失败了。

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

    events: { "onmouseover": "someFunc" }

    但这也失败了。

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

4

1 回答 1

0

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

于 2013-02-08T22:54:56.967 回答