使用 Javascript 隐藏/取消隐藏 Flash 视频答案

【问题标题】：Hiding/UnHiding Flash Videos With Javascript使用 Javascript 隐藏/取消隐藏 Flash 视频
【发布时间】：2009-06-28 06:02:45
【问题描述】：

我正在尝试在我的页面加载时加载嵌入的 Youtube 视频，然后在加载后立即将其隐藏。这工作正常，但是当我想让它可见时，它只出现一秒钟然后消失。 Firefox 3.0 和 Safari 4 都会出现这种情况，我还没有在任何其他浏览器中尝试过。

我尝试使用 .style.display = 'none' 然后 .style.display = ''; 隐藏它和 style.display='block';让它再次可见，以及尝试使用 jQuery .hide() 和 .show() 但这两种方法都会导致 youtube 视频在可见后消失。

是否有一种“正确”的方式我应该使用 javascript 使

下面是我的html和javascript代码sn-ps：

mute()、play()、stop() 只是同名 youtube javascript api 调用的包装器。

switchVideoPlayers() 从 html 按钮调用，分别将 1 和 2 作为 oldid 和 newid。

我不知道我应该将哪些部分包含为 sn-ps，所以我将整个页面转储到下面：

<html>
<head>
<title>YouTube test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>

var player = new Array();
var currentplayer = 1;

function onYouTubePlayerReady(playerid)
{
    if (playerid.indexOf('obj') > -1)
    {
        playerid = playerid.substring(3);
    }

    debug("player " + playerid + " loaded");

    player[playerid] = document.getElementById(playerid);

    if (playerid == 1)
        player[playerid].loadVideoById('5hSW67ySCio');
    else
    {
        player[playerid].loadVideoById('VgMVHc5N3WM', 10); //videoid
        mute(playerid);
        setTimeout(function() { 
            stop(playerid);
            $("#obj" + playerid).hide();
        }, 1000);   

    }
}

function play(id)
{
    player[id].playVideo();
}

function pause(id)
{
    player[id].pauseVideo();
}

function stop(id)
{
    player[id].stopVideo();
}

function mute(id)
{
    player[id].mute();
}

function unmute(id)
{
    player[id].unMute();
}


function seek(id,seconds)
{
    player[id].seekTo(seconds, false);
}

function getCurrentTime(id)
{
    return player[id].getCurrentTime();
}

function loadNewVideo(id,videoid, startseconds)
{
    player[id].loadVideoById(videoid, startseconds);
    mute(id);
    setTimeout(function() { stop(id); }, 1000); 
}

function switchVideoPlayers(oldid, newid)
{
    stop(oldid);
    $("#obj" + oldid).hide();

    $("#obj" + newid).show();
    setTimeout(function() {
        unmute(newid);
        play(newid);
    }, 10);
}

function debug(message)
{
    $('#debug').html($('#debug').html() + message + "<br />");
}


</script>

</head>

<body>

<object id='obj1' width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/5hSW67ySCio&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed id='1' src="http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

<object id='obj2' width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/5hSW67ySCio&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed id='2' src="http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=2" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>


<br />
<br />

<input type='button' value='Play' onclick='play(currentplayer);' />
<input type='button' value='Pause' onclick='pause(currentplayer);' />
<input type='button' value='Stop' onclick='stop(currentplayer);' />
<input type='button' value='Mute' onclick='mute(currentplayer);' />
<input type='button' value='UnMute' onclick='unmute(currentplayer);' />
<input type='button' value='Seek' onclick='seek(currentplayer,getCurrentTime(currentplayer) + 10);' />
<input type='button' value='Get Current Time' onclick='alert(getCurrentTime(currentplayer));' />
<input type='button' value='load strain video' onclick='loadNewVideo(currentplayer+1,"VgMVHc5N3WM", 10);' />
<input type='button' value='switch to next video' onclick='switchVideoPlayers(currentplayer,currentplayer + 1);' />

<br />
<br />
<a href='http://code.google.com/apis/youtube/js_api_reference.html'>api</a>

<div id='debug'>DEBUG MESSAGES:<br />
</div>
</body>

</html>

【问题讨论】：

标签： javascript youtube

【解决方案1】：

大多数浏览器都这样对待 flash - 当你隐藏 + 显示它时，它会重新初始化 swf。

如果您不希望它重新初始化，您可以将其移开（绝对定位） - 诸如 -9999px 之类的东西，然后在您想要显示它时将其移回原位。

【讨论】：

我试过了，但视频仍然被重新初始化（即 onYouTubePlayerReady() 在播放器移动后仍然被调用。我使用了两个 jQuery .css("top","100px")和常规 javascript .style.top = "100px" 将其移回视图。
好的，我修复了...我在切换时添加了 position = absolute 属性。默认加载页面位置：绝对；在对象上允许在不重新加载的情况下重新定位它。你我的朋友得到一个复选标记！

【解决方案2】：

再看一遍，发现当视频可见时，onYouTubePlayerReady() 函数再次被调用。在此函数中，再次调用隐藏视频播放器的代码，这就是它消失的原因。

【讨论】：

【解决方案3】：

在大多数浏览器上，您可以通过设置css样式visibility: hidden;来避免重新初始化问题

这有点烦人，因为 Flash 电影在页面流中仍然占据相同的位置，但它会保持 swf 不可见，并有助于缓解通过覆盖（如灯箱）显示 Flash 等问题

在 Opera 上，隐藏的 swf 停止响应通过 ExternalInterface.addCallback 暴露给 javascript 的函数，因此此解决方案可能由于上述任一原因而无法接受。

【讨论】：