隐藏/取消隐藏的Flash影片使用JavaScript

StackOverflow https://stackoverflow.com/questions/1054359

  •  20-08-2019
  •  | 
  •  

题

我试图加载嵌入的YouTube视频时，我的页面加载，然后把它隐藏马上一旦加载。这是工作正常，但是当我想使其可见它出现在那一瞬间，然后消失。这在两个火狐3.0和Safari 4发生，我还没有尝试过在任何其他浏览器。

我曾尝试使用.style.display =“无”然后.style.display =“”隐藏它;和的style.display = '块';使其再次可见，以及使用jQuery .hide（）和.show（）尝试，但两种方法导致它变得可见后的YouTube视频消失。

有一个“正确”的方式，我应该使 ... <嵌入>标签隐藏起来，使用JavaScript，所以当我试图使其可见它并没有消失，可见？究其原因我不只是动态加载第二个视频，当我需要它是我想要的视频开始下载，以便它可以立刻提供给被打的时候，我准备以使其可见。

下面是我的HTML和JavaScript代码片断：

静音（），播放（），停止（）仅仅是包装器在YouTube的JavaScript API相同名称的电话。

switchVideoPlayers（）从一个html按钮通过1和2 OLDID和newid的分别被称为

我想不出我应包括片段哪件，所以我甩了下面整个页面：

<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>
有帮助吗？

解决方案

多数浏览器处理闪烁这样的 - 当你隐藏+显示，它会重新初始化SWF

如果你不希望它得到重新初始化，则可以只将其移出的方式（绝对位置吧） - 像-9999px或东西，然后只要将它放回地方，当你想证明这一点。

其他提示

又过了看看这个，和原来的onYouTubePlayerReady（）函数被调用时，再次视频可见。在这个函数隐藏视频播放器的代码再次调用这就是为什么它正在消失。

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

这是一个有点恼人，因为Flash影片依然占据页面流相同的位置，但它会保留SWF无形的，有助于缓解闪存一样通过重叠显示（如收藏夹）问题

在歌剧院，隐藏瑞士法郎停止响应经由ExternalInterface.addCallback暴露于JavaScript函数所以这种解决方案可能对任一这些原因是不可接受的。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top