1

YouTube 埋め込みプレーヤーがページ上の他のイベント リスナーを破壊するという問題があります。html5 プレーヤーが必要なため、具体的には Iframe API を使用しています。一般的に、必要な機能は、それをドラッグ可能なダイアログ ボックス。

/*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 プレーヤーがドキュメント イベントをキャンセルしていると思います。

これに対して2つの解決策を試しました：

  1. YouTube プレーヤーのラッパー div を作成し、それにイベント リスナーをアタッチします。これはytplayer.onmousemove = drag完全に失敗します。

  2. の youtube ビデオ プレーヤー オブジェクトにイベント リスナーをアタッチします。

    events: { "onmouseover": "someFunc" }

    しかし、それも失敗します。

私はアイデアが不足していて、何をすべきかわかりません。誰でも助けることができますか？

4

1 に答える 1

0

残念ながら、ブラウザーのセキュリティにより、イベントは iframe によってアプリケーションに伝達されないため、これは期待どおりに機能します。アプリの動作を調整するために、ユーザーが iframe に出入りするタイミングを検出しようとしましたか?

于 2013-02-08T22:54:56.967 に答える