gpt4 book ai didi

Javascript淡入淡出div与youtube视频

转载 作者:行者123 更新时间:2023-11-29 20:01:15 24 4
gpt4 key购买 nike

我不太了解 javascript,但我想知道这是否可能:

我需要视频不可见,当我按下其中一个链接时,YouTube 嵌入淡入淡出(并开始播放)。然后,当我使用 mouseOver 和 mouseOut 时,我希望它淡出,然后能够在 mouseOver 上再次淡入,但我没有让它工作。我有不同的结果,div 似乎消失了(当我将鼠标悬停在播放器过去没有淡入的地方时),现在我停留在这个地方:

以下是我在 stackoverflow 上四处寻找解决方案的过程:

这是一个 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 中,任何有效的解决方案都可以。

最佳答案

你需要:

  • 暂停所有视频

  • 全部隐藏

  • 显示想要的视频

  • 播放想要的视频

给你:

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()
{
$('#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淡入淡出div与youtube视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14425836/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com