Nascondere / nascondere i video Flash con Javascript

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

  •  20-08-2019
  •  | 
  •  

Domanda

Sto tentando di caricare un video Youtube incorporato quando la mia pagina viene caricata, quindi nasconderlo subito dopo il caricamento. Funziona benissimo, tuttavia quando voglio renderlo visibile appare per un secondo e poi scompare. Questo sta accadendo in Firefox 3.0 e Safari 4, non l'ho provato in nessun altro browser.

Ho provato a nasconderlo usando .style.display = 'none' quindi .style.display = ''; e style.display = 'block'; per renderlo nuovamente visibile, così come provato ad usare jQuery .hide () e .show () ma entrambi i metodi fanno sì che il video di YouTube scompaia dopo che è stato reso visibile.

Esiste un modo 'corretto' in cui dovrei creare < oggetto > ... < embed > i tag nascosti e visibili usando javascript in modo che non scompaia quando provo a renderlo visibile? Il motivo per cui non sto solo caricando il secondo video in modo dinamico quando ne ho bisogno è che voglio che il video inizi a scaricarsi in modo che sia immediatamente disponibile per essere riprodotto quando sono pronto per renderlo visibile.

Di seguito sono riportati i miei frammenti di codice html e javascript:

mute (), play (), stop () sono solo wrapper per le chiamate api javascript di YouTube con lo stesso nome.

switchVideoPlayers () viene chiamato da un pulsante html passando rispettivamente 1 e 2 come oldid e newid.

Non sono riuscito a capire quali pezzi avrei dovuto includere come frammenti, quindi ho scaricato l'intera pagina di seguito: 

<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>
È stato utile?

Soluzione

La maggior parte dei browser tratta Flash in questo modo: quando lo nascondi + lo mostri, verrà reinizializzato il file SWF.

Se non vuoi che venga reinizializzato, puoi semplicemente spostarlo (posizione assoluta) - qualcosa come -9999px o qualcosa del genere, quindi spostarlo di nuovo in posizione quando vuoi mostrarlo.

Altri suggerimenti

Ho dato un'altra occhiata a questo, e si scopre che la funzione onYouTubePlayerReady () viene chiamata di nuovo quando il video viene reso visibile. All'interno di questa funzione viene richiamato il codice per nascondere il video player, motivo per cui stava scomparendo.

Sulla maggior parte dei browser è possibile evitare il problema di reinizializzazione impostando lo stile CSS visibility: hidden;

Questo è un po 'fastidioso poiché il filmato flash occupa ancora la stessa posizione nel flusso della pagina, ma manterrà lo swf invisibile e aiuterà ad alleviare problemi come il flash che mostra attraverso gli overlay (come lightbox)

Su Opera, il file SWF nascosto smette di rispondere alle funzioni esposte a JavaScript tramite ExternalInterface.addCallback, quindi questa soluzione potrebbe essere inaccettabile per uno di questi motivi.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top