Player esterno in website 
Author: alfio giovanni di maria
Visited 2713,
Followers 2,
Shared 0
Salve a tutti, sto provando ad inserire nella home del mio sito un lettore player esterno abbinato ad una finestra che si apre in overlay come fancybox. Ho trovato un tutorial su internet e sono riuscito ad inserire il tutto nella home di website. Ho inserito l'html e l'head ed infatti si apre la finestra in overlay ma non parte il video. Non sono molto pratico ma credo che il problema sia [removed] var videopath = "http://www.burconsult.com/tutorials/fancyplayer/"; var swfplayer = videopath + "videos/flowplayer-3.1.1.swf"; [removed] dovrei sostituire il percorso in videopath con quello dove si trova la mia cartella video?Giusto eppure non trova nulla. Forse l'errore non sta li ma in qlc altra parte. Potete aiutarmi?
Posted on the
Buongiorno Alfio,
purtroppo non posso darti assistenza su del codice esterno, però ti consiglio di allegare un file txt zippato con il codice corretto così che non venga "filtrato" e gli utenti della community possano darti pieno supporto. Comunque in generale credo di si che dovresti inserire i percorsi del player e del video che dovrai caricare manualmente su server.
Grazie.
Author
Ho inserito il codice nel mio sito prova www.sologgi.com. Da li riuscite a vedere dove sbaglio ?
... visto velocemente, tanto per incominciare, mancano queste relazioni:
http://www.sologgi.com/videos/flowplayer-3.1.5.swf
http://www.sologgi.com/images/fancyplayer.png...ed altre immagini di controllo player...
... conviene anche che studi detagliatamente le opzioni di utilizzo dal sito del fornitore del player...
... il video FLV c'è e si vede regolarmente...
.
ciao, KolAsim
Author
grazie per la risposta.
No riesco ad allegare il file txt con la idex del sito. mi dice che non è consentito.
l'ho zippato ma nulla
se mi dite come fare ve lo invio. x kolasim io il video non lo vedo ed ho inserito quello che mi hai detto
... devi provvedere ad inviare nelle rispettive cartelle da creare, i files che servono... (images potrebbe essere condivisa dal programma WSx5)
... se non sai come fare con la gestione degli allegati del programma, come indicato qui: http://help.websitex5.com/it/index.html?ins_codice.htm
... allora, meglio, ...dovrai provedere con FTP di terze parti, tipo Filezilla, WS-FTP, oppure con il FilesManager che ti ha messo a disposizione il Server...
...
... invece, come detto prima, il file FLV è presente e funziona regolarmente, che sarebbe questo, letto direttamente dal tuo Sito: http://www.zspace.it/kolasim/testFLV/testFLV_KolAsim3.html
.
ciao
Author
come hai fatto?? io non ci riesco. uff ho caricato il file esterni con filezilla io se vado su www.sologgi.com non vedo nulla.
Qst è l'index del sito,puoi vedere dove sbaglio?
<!DOCTYPE html><!-- HTML5 -->
<html lang="it" dir="ltr">
<head>
<meta charset="utf-8" />
<!--[if IE]><meta http-equiv="ImageToolbar" content="False" /><![endif]-->
<meta name="generator" content="Incomedia WebSite X5 Evolution 9.1.12.1975 - www.websitex5.com" />
<link rel="stylesheet" type="text/css" href="style/reset.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="style/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="style/template.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style/menu.css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="style/ie.css" media="screen" /><![endif]-->
<script type="text/javascript" src="res/swfobject.js"></script>
<script type="text/javascript" src="res/jquery.js?1975"></script>
<script type="text/javascript" src="res/x5engine.js?1975"></script>
<script type="text/javascript" src="res/x5cartengine.js?1975"></script>
<script type="text/javascript" src="res/l10n.js?1975_635150262987318972"></script>
<script type="text/javascript" src="res/x5settings.js?1975_635150262987318972"></script>
<title>Nuovo Progetto 1</title>
<link rel="stylesheet" type="text/css" href="pcss/index.css" media="screen" />
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/flowplayer-3.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/fancyplayer.js"></script>
<script type="text/javascript">
var videopath = "http://www.sologgi.com/";
var swfplayer = videopath + "videos/flowplayer-3.1.5.swf";
var swfcontent = videopath + "videos/flowplayer.content-3.1.0.swf";
var swfcaptions = videopath + "videos/flowplayer.captions-3.1.4.swf";
</script>
</head>
<body>
<div id="imPage">
<div id="imHeader">
<h1 class="imHidden">Nuovo Progetto 1</h1>
</div>
<a class="imHidden" href="#imGoToCont" title="Salta il menu di navigazione">Vai ai contenuti</a>
<a id="imGoToMenu"></a><p class="imHidden">Menu principale:</p>
<div id="imMnMn" class="auto">
<ul class="auto">
<li id="imMnMnNode0" class="imMnMnCurrent">
<a href="index.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Home Page</span>
</span>
</a>
</li>
<li id="imMnMnNode3">
<a href="pagina-1.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Pagina 1</span>
</span>
</a>
</li>
<li id="imMnMnNode4">
<a href="pagina-2.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Pagina 2</span>
</span>
</a>
</li>
<li id="imMnMnNode5">
<a href="pagina-3.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Pagina 3</span>
</span>
</a>
</li>
</ul><script type="text/javascript">x5engine.imQueue.push_init("x5engine.utils.imPreloadImages(['menu/index_h.png','menu/pagina-1_h.png','menu/pagina-2_h.png','menu/pagina-3_h.png','res/imLoad.gif','res/imClose.png'])",false);</script>
</div>
<div id="imContentGraphics"></div>
<div id="imContent">
<a id="imGoToCont"></a>
<div style="float: left;">
<div id="imCell_3" class="imGrid[0, 1]"><div id="imCellStyleGraphics_3"></div><div id="imCellStyle_3"><div class="imHTMLObject" style="height: 1000px; overflow: hidden; text-align: center;"><body>
<div id="wrapper">
<div id="header">
<img src="images/fancyplayer.png" alt="FancyPlayer" style="position:absolute; top:14px; right:8px;" />
</div>
<div id="videoswrap">
<ul id="videos">
<li>
<a href="videos/croccook.flv" class="video_link"><img src="images/tour_video.png" width="218" height="148" alt="tour" style="margin-bottom:4px" /></a>
</li>
</ul>
</div>
<div id="footer">
<ul id="links">
<li>
<a href="http://www.sologgi.com" target="_self">
<img src="images/back_tut.png" align="ritorna alla home" />
</a>
</li>
<li>
<a href="" target="_self">
<img src="images/down_code.png" align="Next video " />
</a>
</li>
<li>
<a href="" target="_self">
<img src="images/down_png.png" align="Contatti" />
</a>
</li>
</ul>
</div>
</div>
</body>
</html></div></div></div>
</div>
<div id="imBtMn"><a href="index.html">Home Page</a> | <a href="pagina-1.html">Pagina 1</a> | <a href="pagina-2.html">Pagina 2</a> | <a href="pagina-3.html">Pagina 3</a> | <a href="imsitemap.html">Mappa generale del sito</a></div>
<div class="imClear"></div>
</div>
</div>
<div id="imFooterBg">
<div id="imFooter">
</div>
</div>
<span class="imHidden"><a href="#imGoToCont" title="Rileggi i contenuti della pagina">Torna ai contenuti</a> | <a href="#imGoToMenu" title="Naviga ancora nella pagina">Torna al menu</a></span>
</body>
</html>
... le risposte che ti ho dato sono riferite appunto a codice HTML di quella pagina, e non devi far altro che iniziare a seguire i suggerimenti già dati...
... devi perfezionare/realizzare/attivare queste relazioni, inviando i files relativi che mancano:
http://www.sologgi.com/videos/flowplayer-3.1.5.swf
http://www.sologgi.com/images/fancyplayer.png
http://www.sologgi.com/images/back_tut.png
http://www.sologgi.com/images/down_code.png
.
... quando i link funzioneranno si potrebbe capire se il resto funzioni o meno...
.
ciao
Author
Ok grazie provo e ti faccio sapere
Author
Salve a tutti,ciao KolAsim ho inserito i file mancanti...come mi hai detto.Spero di averlo fatto bene ma non funziona cmq.cos'è che non va?
... vedo che l'immagine ha questo comando/link assegnato: videos/croccook.flv
...!... come mai...?... ... è indicato nel procedimento che avevo consigliato di consultare...?...
... un file FLV non può essere avviato se non attraverso un Player SWF dedicato...
... non puoi pubblicare in parallelo la pagina HTML generata dal programma che hai usato, per vederne il funzionamento previsto...?..
.
________EDIT__________________________
... prova a fare questa prova: manda il file flowplayer-3.1.5.swf nella RADICE del Sito, e vediamo se cambia qualcosa...
Author
Grazie per la risposta.Ho corretto il link dell'immagine,è una settimana che vado dietro a questa funzione e sicuramente ho pasticciato con tutto.
Ho inviato il file flowplayer-3.1.5.swf e qlc sembra sia cambiato adesso invece di niente mi compare la rotella del caricamento ma non si apre la schermata con il video.
In www.sologgi.com/prova ho inserito un nuovo progetto con il tutorial senza cambiare nulla
ma non mi funziona neanche questo almeno non sul server in locale dal pc si.
Grazie a tutti
... "prova" non esiste, ...ed il link attuale cerca di aprire una immagine che non trova...
...
... pubblica la pagina HTML che ti genera quel programma, in modo da testarlo, ...e poi penserai ad incorporarlo in WebSitex5...
... altrimenti, prova ad usare il player video di WebSitex5...
.
bye
Author
ok ho fatto come mi hai detto ed ho caricato la pagina index del tutorial.
Così funziona (non ho toccato nulla ne nella struttura ne nei percorsi dei file)perchè se invece lo integro in website e ci metto il percorso del mio video no?
Grazie per la pazienza e l'aiuto
... posta il LINK del test che hai effettuato, così da verificarne il funzionamento diretto e poter valutare se qualcosa si potesse fare per WSx5...
.
ciao
Author
il link è sempre www.sologgi.com.
vedi se si può fare qlc
grazie
... se hai fatto fatto tutto il resto in modo regolare, ...prova a sostituire nel codice la stringa:
var videopath = "http://www.burconsult.com/tutorials/fp2/";
... con quella del tuo sito, se il player venisse usato nella index come nell'esempio:
var videopath = "http://www.sologgi.com/";
.
bye
Author
Grazie ancora, ho fatto questa sia con il mio progetto di website sia sostituendola nell'index di prova che ho inserito adesso. il risultato è schermata nera,come se non trovasse il link del video.
Che può essere secondo te?
... ma, l'hai dichiarato e messo correttamente...?...
Author
Scusa l'ingnoranza, cosa vuoi dire con dichiarato?
Questa è l'index del test che ho messo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FancyPlayer - jQuery FancyBox and FlowPlayer Integration :: Tutorial by Burconsult ® for WebgurusDesignBlog.com</title>
<!-- Remember to include CSS files before JS -->
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/flowplayer-3.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/fancyplayer.js"></script>
<script type="text/javascript">
var videopath = "http://www.sologgi.com/";
var swfplayer = videopath + "videos/flowplayer-3.1.5.swf";
var swfcontent = videopath + "videos/flowplayer.content-3.1.0.swf";
var swfcaptions = videopath + "videos/flowplayer.captions-3.1.4.swf";
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/fancyplayer.png" alt="FancyPlayer" style="position:absolute; top:14px; right:8px;" />
</div>
<div id="videoswrap">
<ul id="videos">
<li>
<a href="images/tour_video.png" name="videos/tour.flv" title="Café Tour" class="video_link captions" rel="gallery"><img src="images/tour_video.png" width="218" height="148" alt="tour" style="margin-bottom:4px" /></a>
</li>
<li>
<a href="images/cadbury_gorrilla.jpg" name="image" title="Cadbury Gorilla" class="video_link " rel="gallery"><img src="images/gorilla_video.png" width="218" height="148" alt="gorilla" style="margin-bottom:4px" /></a>
</li>
<li>
<a href="images/bottleopener_video.png" name="videos/bottleopener.mp4" title="Bottle Opener" class="video_link" rel="gallery"><img src="images/bottleopener_video.png" width="218" height="148" alt="bottleopener" style="margin-bottom:4px" /></a>
</li>
</ul>
</div>
<div id="footer">
<ul id="links">
<li>
<a href="http://www.webgurusdesignblog.com" target="_self">
<img src="images/back_tut.png" align="Back to Tutorial" />
</a>
</li>
<li>
<a href="files/fancyplayer_code.zip" target="_self">
<img src="images/down_code.png" align="Download Code" />
</a>
</li>
<li>
<a href="files/fancyplayer_png.zip" target="_self">
<img src="images/down_png.png" align="Download PNG" />
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
... quella pagina carica i seguenti video:
tour.flv
bottleopener.mp4
... i tuoi come si chiamano...?... ...e se in modo diverso, devi correggere il riferimento al video nel codice che hai postato...
.
Author
il mio video si chiama croccook.flv
Author
Ho corretto il riferimento come mi hai indicato nel punto:
<a href="images/tour_video.png" name="videos/tour.flv" e al posto di tour.flv ho messo il mio file.
Adesso ricevo errore:
Failed to load a resource:
... ho fatto una prova velocissima con i miei FLV presenti in rete per i TEST, utilizzandone la PATH "assoluta", quindi vedere nel listato le modifiche presenti...
... la stringa videopath usata è questa: var videopath = "";
... vedi>> : http://www.zspace.it/kolasim/website/fancyplayer/
.
ciao
Author
grazie tanto per l'aiuto,ora provo e ti faccio sapere
Author
Il tuo test è perfetto, il mio fa schifo.
Se metto la variabile assoluta:
var videopath = "";
var swfplayer = videopath + "videos/flowplayer-3.1.5.swf";
var swfcontent = videopath + "videos/flowplayer.content-3.1.0.swf";
var swfcaptions = videopath + "videos/flowplayer.captions-3.1.4.swf";
ricevo l'errore in allegato:
la stringa con il link al video è
<a href="images/thumb1.jpg" name="videos/croccook.flv" title="Café Tour" class="video_link captions" rel="gallery"><img src="images/thumb1.jpg" width="218" height="148" alt="tour" style="margin-bottom:4px" /></a>
... ho cambiato il primo video nel mio esempio, linkando il tuo FLV...
... guarda nel codice usato...
... ! ... ma, ...non è più bello l'effetto che si ottiene direttamente nel programma WSx5 usando lo showbox ...?...
.
ciao
Author
Hai ragione, volevo integrare un player esterno con uno showbox e pensavo fosse più semplice farlo con un plug in abbinato che inserirlo nello showbox di website.
Ultima tentativo vediamo se ci riesco dopo di che ti lascio perchè vuol dire che sono un caso disperato :-) e ti ringrazio moltissimo
La situazione attuale è qst.
ho una cartella images con tutte le immagini del test
una cartella js con tutti i file js:
jquery-1.3.2.min.js
flowplayer-3.1.1.min.js
jquery.fancybox-1.2.1.pack.js
jquery.easing.1.3.js
fancyplayer.js
una cartella videos con i file:
croccook.flv
flowplayer-3.1.1.swf
una cartella css con
jquery.fancybox.css e lo style.css
e l'index (ho preso il codice sorgente del tuo ultimo test senza cambiare nulla)
e non vaaaaaaaaa.
Author
poi quello che proprio non riesco a capire, cambio il link di un immagine e tutto funziona senza problemi,viene effettuata la sotituzione senza problemi.
Vado a fare la stessa operazione con un video e non vedo nulla.
Se fosse qlc di sbagliato nella struttura non dovrebbe funzionare nulla giusto?
Però tu i video riesci a farli vedere...
... nella cartella videos sembra che ti manchi questo file: flowplayer.controls-3.1.1.swf
.
ciao
Author
ho aggiunto il file ma non è cambiato nulla.
grazie
...
...!?... adesso c'è, ...ma hai eliminato quest'altro...!?...
flowplayer-3.1.5.swf
.
...prova, e rivediamo quando hai fatto...
ciao
Author
adesso nella cartella videos
c'è:
croccook.flv
flowplayer-3.1.1.swf
flowplayer-3.1.3.swf
flowplayer-3.1.5.swf
flowplayer.controls-3.1.1.swf
flowplayer.controls-3.1.3.swf
flowplayer.controls-3.1.5.swf
flowplayer.content-3.1.0.swf
flowplayer.captions-3.1.4.swf
l'index è
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FancyPlayer - jQuery FancyBox and FlowPlayer Integration :: Tutorial by Burconsult ® for WebgurusDesignBlog.com</title>
<!-- Remember to include CSS files before JS -->
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/flowplayer-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/fancyplayer.js"></script>
<script type="text/javascript">
var videopath = "";
var swfplayer = videopath + "videos/flowplayer-3.1.1.swf";
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="videoswrap">
<ul id="videos">
<li>
<a href="http://www.sologgi.com/videos/croccook.flv" class="video_link"><img src="http://www.sologgi.com/images/thumb1.jpg" width="218" height="148" alt="tour" style="margin-bottom:4px" /></a> </li>
<li>
<a href="http://www.zspace.it/kolasim/miei_files/videoFLV/video2.flv" class="video_link"><img src="http://www.zspace.it/kolasim/miei_files/videoFLV/video1/video2.jpg" width="218" height="148" alt="gorilla" style="margin-bottom:4px" /></a>
</li>
<li>
<a href="http://www.zspace.it/kolasim/miei_files/videoFLV/video3.flv" class="video_link"><img src="http://www.zspace.it/kolasim/miei_files/videoFLV/video1/video3.jpg" width="218" height="148" alt="bottleopener" style="margin-bottom:4px" /></a>
</li>
<li>
<a href="http://www.zspace.it/kolasim/miei_files/videoFLV/video4.flv" class="video_link"><img src="http://www.zspace.it/kolasim/miei_files/videoFLV/video1/video4.jpg" width="218" height="148" alt="bottleopener" style="margin-bottom:4px" /></a>
</li>
<li>
<a href="http://www.zspace.it/kolasim/miei_files/videoFLV/video5.flv" class="video_link"><img src="http://www.zspace.it/kolasim/miei_files/videoFLV/video1/video5.jpg" width="218" height="148" alt="bottleopener" style="margin-bottom:4px" /></a>
</li>
<li>
<a href="http://www.zspace.it/kolasim/miei_files/videoFLV/video6.flv" class="video_link"><img src="http://www.zspace.it/kolasim/miei_files/videoFLV/video1/video6.jpg" width="218" height="148" alt="bottleopener" style="margin-bottom:4px" /></a>
</li>
</ul>
</div>
<div id="footer">
</div>
</body>
</html>
graaazie
... ho incollato il tuo listato, tale e quale, nel blocco note, ed inviato in rete, e questo ne è il risultato:
http://www.zspace.it/kolasim/website/fancyplayer/sologgiTest.html
...
... visto che il mio esempio funziona con il link ASSOLUTO, altro non riesco ad immaginare, se non che ci sia in atto nel tuo server un qualcosa di simile al cross domain policy...
... eventualmente, prova a sostituire il link ASSOLUTO con il link RELATIVO per quanto riguarda il tuo video, (per i miei non potrai fare niente in caso di cross domain policy) ..
... per esempio prova con videos/croccook.flv ...al posto di http://www.sologgi.com/videos/croccook.flv
.
bye
Author
grazie per l'aiuto, sei stato gentilissssimo