Share
Oggi, ti insegnerò come visualizzare i video sul web usando un flash player open source. Tratteremo tutti i passaggi, inclusa la conversione di un video nel formato file flv e l'incorporazione di un player personalizzato mediante SWFObject. La parte migliore è che la vendita al dettaglio di Adobe Flash non è richiesta.
Il primo passo per incorporare un video è codificare un video in formato .flv. Quasi tutti i web player online utilizzano .flv come standard per la riproduzione di file.
Per questo tutorial puoi scaricare il video di esempio che ho usato chiamato Trusted Computing su archive.org (Diretto da: Benjamin Stephan e Lutz Vogel.)
Se non si dispone di Macromedia Flash, passare a 1b.
Apri Macromedia Flash Video Encoder e aggiungi il video alla coda File> Aggiungi. Quindi fai clic su Inizia coda su File> Inizia coda e hai finito di codificare il file in formato .flv.
Nota: la personalizzazione su questo passaggio è minima. Per un maggiore controllo della dimensione e della compressione del video, vai al passaggio 1b o 1c.
Ci sono molte opzioni quando si codifica in FLV. L'opzione Windows per questo tutorial è il Riva FLV Encoder perché è gratuito e personalizzabile.
Scarica e installa il codificatore Riva FLV dal sito Web di Riva.
Una volta aperto, aggiungi il video alla casella video di input utilizzando il pulsante Sfoglia. Il programma riprodurrà automaticamente il video nella stessa directory.
Successivamente, regoleremo le preferenze sulla sezione giusta. Per questo semplice video useremo le dimensioni del video di 320x240 e manterremo tutte le altre impostazioni come predefinite. Per avviare la codifica, fare clic su Codifica FLV nella parte inferiore del programma.
Nota: prova a mantenere le dimensioni del file più basse regolando le impostazioni e mantenendo la risoluzione bassa. Più grande è il video, più tempo ci vuole per caricare.
La scelta per Mac in questo tutorial è ffmpegX.
Scarica e installa l'encoder ffmpegX dal loro sito web.
Una volta aperto, aggiungi il video alla casella video di input utilizzando il pulsante Apri. Il programma salverà l'output del video nella stessa directory, ma dovrai aggiornare il nome del file in TrustedComputing_LAFKON_LOW.flv.
Quindi cambia il formato di destinazione in FLV e fai clic su codifica. Per apportare eventuali modifiche alle dimensioni e alla compressione del video, fai clic sulle diverse schede.
Nota: prova a mantenere le dimensioni del file più basse regolando le impostazioni e mantenendo la risoluzione bassa. Più grande è il video, più tempo ci vuole per caricare.
In questo tutorial utilizzeremo il lettore MPW open source per riprodurre i nostri file flash.
Le ragioni principali sono perché il riproduttore MPW è open source e offre sia una facile personalizzazione che una personalizzazione più approfondita.
Per scaricare il lettore, visitare il sito Web di MPW Player. Il sito Web è in spagnolo, ma fai clic sul pulsante di download blu.
I file necessari sono mpw_player.swf e la cartella include. Nota: inserire il file flv codificato, TrustedComputing_LAFKON_LOW.flv, nella stessa cartella del lettore e del file html.
Creare un documento HTML vuoto e aggiungere tag di script per swfobject nella parte iniziale del documento. Il file swfobject.js si trova nella cartella include nel download da mpw player.
Successivamente, inseriremo il flash player attuale e modificeremo una riga. Inserisci il nome del file video, TrustedComputing_LAFKON_LOW.flv, sotto la variabile flv.
Questo div è sostituito dal javascript usando swfobject
Ora abbiamo un giocatore funzionante con l'aspetto predefinito.
La personalizzazione del giocatore è molto importante ed è la ragione per cui utilizziamo il riproduttore MPW. Per rendere gli aggiornamenti al giocatore tutto ciò che dobbiamo fare è aggiungere variabili nel codice JavaScript.
La prima personalizzazione del player aggiungerà una foto di anteprima per il video. Per aggiungere una foto, aggiungi la variabile jpg e quindi la posizione della foto. La foto utilizzata nel tutorial si chiama images_27_6 / how-to-play-video-using-an-open-source-player_10.jpg - uno screenshot dal video. Nota: non dimenticare i tag di script nella parte iniziale del documento.
Questo div è sostituito dal javascript usando swfobject
Per apportare ulteriori modifiche, aggiungi più variabili. Ecco un esempio di tutte le variabili di default aggiunte con commenti che spiegano ogni scopo.
Questo div è sostituito dal javascript usando swfobject
L'integrazione del player con SWFObject ci consente di utilizzare un'immagine o un testo segnaposto nel caso in cui l'utente non abbia flash o javascript. Un grande motivo per questo è che molti computer o dispositivi come l'iPhone non hanno Flash o JavaScript abilitati.
In questo esempio useremo un'immagine semplice, tuttavia qualsiasi codice funzionerà. SWFObject sostituisce tutto il contenuto all'interno di un div di riferimento. Quando un utente manca JavaScript o Flash, il browser visualizza semplicemente il contenuto del div. In questo caso, il contenuto visualizzato è lo stesso file jpg, images_27_6 / how-to-play-video-using-an-open-source-player_10.jpg, che abbiamo usato per un'anteprima.
Per mettere più di un giocatore su una singola pagina, assicurati solo che ogni div di riferimento abbia un nome univoco. Quindi aggiorna il riferimento JavaScript per far corrispondere l'ID div.
Il lettore MPW può anche essere utilizzato come lettore audio. Tutto quello che dobbiamo fare è aggiungere la variabile mp3 al posto di flv.
MPW Player è open source, il che significa che chiunque può scaricare e apportare modifiche al lettore. Per scaricare il codice sorgente per il lettore, visitare questa pagina Web e scaricare "MPW Player SRC".
MPW Player non è perfetto per ogni video web. Prova questi altri giocatori gratuiti in quanto potrebbero funzionare meglio per te.
Questo tutorial ti ha mostrato come codificare un video in flv e personalizzare un flash player open source per visualizzare video e audio sul web.
Accentsconagua