Je tente de charger une vidéo YouTube intégrée lors du chargement de ma page, puis de la masquer immédiatement après son chargement. Cela fonctionne très bien, mais quand je veux le rendre visible, il apparaît pendant une seconde puis il disparaît. Cela se produit à la fois dans Firefox 3.0 et Safari 4, je ne l'ai pas essayé dans d'autres navigateurs.Masquage/Dissociation de vidéos Flash avec Javascript
J'ai essayé de le cacher en utilisant .style.display = 'none' puis .style.display = ''; et style.display = 'bloquer'; pour le rendre visible à nouveau, ainsi que essayé jQuery .hide() et .show() mais les deux méthodes entraînent la disparition de la vidéo youtube après qu'elle est visible.
Y a-t-il un 'bon' moyen que je devrais faire pour que l'objet <> ... < embarque> les balises cachées et visibles en javascript afin qu'elles ne disparaissent pas lorsque je tente de le rendre visible? La raison pour laquelle je ne charge pas la seconde vidéo dynamiquement quand j'en ai besoin est que je veux que la vidéo commence à être téléchargée pour qu'elle soit immédiatement disponible lorsque je serai prête à la rendre visible.
Ci-dessous mon html et javascript extraits de code:
mute(), play(), stop() ne sont que des emballages pour le youtube javascript appels api du même nom.
switchVideoPlayers() est appelé à partir d'un bouton html en passant 1 et 2 respectivement comme oldid et newid.
Je ne pouvais pas comprendre ce que je dois inclure des pièces sous forme d'extraits, donc j'ai déversé toute la page ci-dessous:
<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>
J'ai essayé mais la vidéo est toujours réinitialisée (c'est-à-dire que le onYouTubePlayerReady() est toujours appelé après le déplacement du lecteur.J'utilise jQuery .css ("top", "100px") et javascript .style .top = "100px" pour le replacer dans la vue – jcaruso
Ok j'ai corrigé ça ... j'ajoutais la propriété position = absolute quand je faisais le switch, en chargeant la page par défaut avec position: absolute, sur l'objet permet pour le repositionner sans rechargement. Vous mon ami a une coche! – jcaruso