我不太了解 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,任何有效的解决方案都可以。
最佳答案
您需要:
暂停所有视频
全部隐藏
显示所需视频
播放所需视频
给你:
注意
要使淡入淡出效果发挥作用,您必须将 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/