Я пытаюсь загрузить встроенное видео Youtube при загрузке моей страницы, а затем сразу же скрыть его после загрузки. Это работает нормально, однако, когда я хочу сделать его видимым, оно появляется на секунду, а затем исчезает. Это происходит как в Firefox 3.0, так и в Safari 4, я не пробовал это делать ни в одном другом браузере.
Я пытался скрыть это, используя .style.display = 'none' then .style.display = ''; и style.display = 'block'; чтобы сделать его снова видимым, а также попытался использовать jQuery .hide () и .show (), но оба метода приводят к исчезновению видео на YouTube после того, как оно стало видимым.
Есть ли «правильный» способ сделать теги ... скрытыми и видимыми с помощью javascript, чтобы они не исчезали при попытке сделать его видимым? Причина, по которой я не просто загружаю 2-е видео динамически, когда мне это нужно, заключается в том, что я хочу, чтобы видео начало загружаться, чтобы оно сразу было доступно для воспроизведения, когда я буду готова сделать его видимым.
Ниже приведены мои фрагменты кода html и javascript:
mute (), play (), stop () - это просто оболочки для вызовов API JavaScript для YouTube с тем же именем.
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>