2

私は多くのjavascriptを知りませんが、これが可能かどうか疑問に思います：

ビデオを非表示にする必要があります。リンクの1つを押すと、YouTubeの埋め込みがフェードインします（そして再生を開始します）。次に、mouseOverとmouseOutをフェードアウトしてから、mouseOverで再びフェードインできるようにしたいのですが、機能しません。divが消えたように見える（以前はプレーヤーがフェードインしていなかった場所にマウスを置くと）さまざまな結果が得られましたが、今はこれに固執しています：

これが、ソリューションのスタックオーバーフローについてここで見てきたところです。

これがjsFiddleです> http://jsfiddle.net/VKzxy/

そして私のjQuery：

/* elt: Optionally, a HTMLIFrameElement. This frame's video will be played,
     *       if possible. Other videos will be paused*/
    function playVideoAndPauseOthers(frame) {
        $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
            var func = this === frame ? 'playVideo' : 'pauseVideo';
            this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
        });
    }
    $('#links a[href^="#vid"]').click(function() {
        var frameId = /#vid(\d+)/.exec($(this).attr('href'));
        if (frameId !== null) {
            frameId = frameId[1]; // Get frameId
            playVideoAndPauseOthers($('#playlist' + frameId + ' iframe')[0]);
                        $($('#playlist' + frameId + ' iframe')[0]).fadeIn(750);
                        //When hovering, fadeIn.
                        $('#content').mouseenter(function(){
                                $($('#playlist' + frameId)[0]).fadeIn(750);
                        });
                        //When leaving, fadeOut.  
                        $($('#playlist' + frameId)[0]).mouseleave(function(){
                                $($('#playlist' + frameId)[0]).fadeOut(750);
                        });
        }
    });

編集：それはjavascriptである必要はありません、うまくいくどんな解決策でもうまくいくでしょう。

4

1 に答える 1

3

必要がある：

  • すべての動画を一時停止

  • それらをすべて隠す

  • 希望のビデオを表示する

  • 目的のビデオを再生する

どうぞ：

http://jsfiddle.net/5Yxhj/6/

ノート

フェード効果を機能させるには、jsfiddleの例のように、wmodeを不透明に設定する必要があります。

src="http://www.youtube.com/embed/a-TrP8Z3Cb8?wmode=opaque& (...)

これにより、jQueryの不透明度レベルの変更（実際には、fadeInまたはfadeOutを呼び出したときに発生することです）をフラッシュオブジェクトの上に表示することもできます。（実際には、iframeの不透明度が変化したとき）。

これがフィドルにあるJSコードです

function hideAll()
{
    $('#content').children('div').each(function()
    {
        $(this).hide();
    });
}

function fadeAll(strClickId)
{
    var elems = $('#content').children('div'), count = elems.length;

    elems.each(function()
    {
        $(this).fadeOut(750, function()
        {
            $(this).children('iframe')[0].contentWindow.postMessage(
                JSON.stringify({
                    "event": "command",
                    "func": "pauseVideo",
                    "args": ""
                }), "*"
            );
            if (!--count)
            {
                $(strClickId).fadeIn(750, function()
                {
                    $(strClickId).children('iframe')[0].contentWindow.postMessage(
                        JSON.stringify({
                            "event": "command",
                            "func": "playVideo",
                            "args": ""
                        }), "*"
                    );
                });
            }
        });
    });
}

$(window).load(function()
{
    hideAll();
});

$('#links a[href^="#vid"]').click(function()
{    
    var frameId = '#playlist' + $(this).attr('href').substr(4);
    fadeAll(frameId);
});
于 2013-01-20T15:39:35.330 に答える