Javascript淡入淡出与YouTube视频的div [英] Javascript fade in fade out div with youtube video

问题描述

我不知道很多javascript，但我不知道这是否可能：

我需要的视频是不可见的，当我按我的链接之一youtube嵌入淡入（并开始播放）。然后当我mouseOver和mouseOut我想它淡出，然后能够再次淡入mouseOver，但我不能让它工作。我有不同的结果，其中的div似乎消失了（当我鼠标在玩家过去是什么都不消失），现在困在这：

在这里是我在这里找到解决方案在stackoverflow到底有多远：

这是一个jsFiddle> http://jsfiddle.net/VKzxy/

和我的jQuery：

  / * elt：可选，HTMLIFrameElement。将播放此帧的视频，如果可能，
 *。其他视频将被暂停* / 
 function playVideoAndPauseOthers（frame）{
 $（'iframe [src * =http://www.youtube.com/embed/]'）。 （'{event：command，func：play）; '+ func +'，args：}'，'*'）; 
}）; 
} 
 $（'＃links a [href ^ =＃vid]'）click（function（）{
 var frameId = /＃vid（\d +）/。 exec（$（this）.attr（'href'））; 
 if（frameId！== null）{
 frameId = frameId [1]; //获取frameId 
 playVideoAndPauseOthers （'#playlist'+ frameId +'iframe'）[0]）; 
 $（$（'＃playlist'+ frameId +'iframe'）[0]）fadeIn（750）; 
 // hovering，fadeIn。
 $（'＃content'）。mouseenter（function（）{
 $（$（'＃playlist'+ frameId）[0]）。 
}）; 
 //离开时，fadeOut。
 $（$（'＃playlist'+ frameId）[0]）mouseleave $（'＃playlist'+ frameId）[0]）。fadeOut（750）; 
}）; 
} 
}）; 
  

编辑：它不一定在javascript中，任何解决方案都可以。

$ p

• p>暂停所有视频




• 全部隐藏




• >

go：




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





注意





褪色效果工作你必须设置wmode为不透明，就像在jsfiddle示例中。

  src =http： /www.youtube.com/embed/a-TrP8Z3Cb8?wmode=opaque&（...）
  

这将允许jQuery的不透明度级别的改变（实际上这是调用fadeIn或fadeOut时发生的）也显示在flash对象的顶部（实际上当iframe不透明度改变时）。





这是在FIDDLE中的JS代码

  function hideAll b $ b {
 $（'＃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：
}），*
）; 
} b $ b} 
}）; 
}）; 
} 
 
 $（window）.load（function（）
 {
 hideAll（）; 
} 
 
 $（'＃links a [href ^ =＃vid]'）。click（function（）
 {
 var frameId ='#playlist'+ $这个）.attr（'href'）。substr（4）; 
 fadeAll（frameId）; 
}）; 
  




I dont know a lot of javascript but I wonder if this is possible:

I need the videos to be invisible and when I press one of my links a youtube embed fades in (and starts playing). Then when I mouseOver and mouseOut I want it to fade out and then be able to fade in again on mouseOver, but I don't get it to work. I've had different results where the div seems to disappear (when I mouse over where the player used to be nothing fades in) and now im stuck at this:

Here is how far I've come with looking around here on stackoverflow for solutions:

Here's a jsFiddle > http://jsfiddle.net/VKzxy/

And my 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);
                        });
        }
    });

edit: It does not have to be in javascript, any solution that works will be fine.

解决方案

you need to:

• pause all videos

• hide them all

• show desired video

• play desired video

Here you go:

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

NOTE

for the fade effect to work you have to set wmode to opaque, just like in the jsfiddle example.

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

this will allow jQuery's changes in opacity levels (actually this is what happens when calling fadeIn or fadeOut) to also show on top of the flash object. (actually when the iframe opacity changes).

HERE IS THE JS CODE THAT'S IN THE FIDDLE

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);
});

这篇关于Javascript淡入淡出与YouTube视频的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！