inserimento video sulla pagina: usa javascript e flash

  1. autori

qualche tempo fa ho menzionato il tag video, implementato specialmente in html5. tuttavia, sfortunatamente, l'uso del tag causerà più disagi piuttosto che benefici. quindi, ti dirò come puoi fare completamente con un formato video.

per un progetto avevo bisogno di trovare la possibilità di svitare video sul sito. Non è stato possibile creare un lettore da zero su un flash (per cominciare, non ho un ambiente di sviluppo e non l'ho fornito), quindi era necessario, in effetti, trovare un candidato adatto di fronte a un flash player. non era necessario nulla di particolarmente complicato, dal momento che grazie agli utenti di YouTube è molto facile navigare in questo tipo di giocatori;)

2 candidati situati sui siti flv-mp3.com (un progetto di uppod'a) e Flowplayer . avendo fatto ciascuno un piccolo colpo, il primo fu rapidamente abbandonato a favore della mietitrebbia fornendo l'api attuale. come il tempo ha dimostrato, l'intestino non mi ha deluso (anche se alcune persone sono riuscite a entrare in vtyuhat flv-mp3.com).

Come sapete, la prima impressione è piuttosto ingannevole, e talvolta viene data preferenza al dispositivo meno saturo (specialmente se usa la lingua nativa). È questo approccio che è stato richiesto su flv-mp3: il servizio offre l'opportunità di "assemblare" un giocatore con caratteristiche specifiche (in modulo indica il file in riproduzione, lo screen saver, le dimensioni e alcuni altri parametri) e ottieni il codice di output per inserire il file. Sì, l'opzione può sembrare molto comoda, soprattutto per le persone che considerano html una strega forte, per non parlare di js e così via.

è improbabile che l'aggiunta periodica di video al sito contribuisca all'entusiasmo di "costruire" costantemente il giocatore da solo. in alternativa, puoi esplorare tutte le impostazioni e automatizzare attraverso la lingua del server. ma questo principio può essere chiamato solo distorto (è molto più facile caricare video su YouTube e ottenere il codice pronto per il download).

qui arriviamo alla cosa che può essere già completamente chiamata una strega. vuoi capire la magia di javascript? Mostrerò che non è affatto difficile (ancora più facile che usare un costruttore). e aiutare con questo flowplayer. puoi scegliere una versione da qui , ma la prima versione distribuita sotto GPL3 è abbastanza adatta per il tuo sito.

Il lettore supporta la riproduzione del seguente contenuto: flv, mp4, m4v (per immagini - jpg, gif, png). Il video è supportato dalla versione 9, quindi non ci dovrebbero essere problemi di supporto.

Scarica l'archivio con il lettore e decomprimilo. Dovrai caricare 3 file sul sito: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf ed example / flowplayer-NumVer.min.js , dove NumVer è solo il numero di versione e potrebbe essere, ad esempio, 3.2.7 .

Il primo file contiene il pannello di controllo, il secondo - direttamente il lettore e il terzo è il collegamento che fornisce api. I primi 2 file (* .swf) devono essere nella stessa cartella. ora è il momento per il codice più semplice. potrebbe essere:

<div id = "player" style = "width: 640px; height: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

L'elemento div con l'ID giocatore è il contenitore in cui il video verrà svitato. nella seconda riga c'è la connessione file javascript. Direttamente per l'output è responsabile una funzione flowplayer () , che passa 3 parametri:

  1. ID dell'elemento in cui il video deve essere riprodotto;
  2. il percorso per il giocatore (cioè per il giocatore, e non per i controlli che verranno caricati automaticamente);
  3. Alcuni parametri aggiuntivi.

A proposito, oltre all'identificatore, puoi passare direttamente un riferimento a un oggetto o selettore.

Il codice sopra non mostra nulla, ma dà un'idea di quanto sia facile connettere un riproduttore di flussi a una pagina. Per produrre video, è necessario creare un terzo parametro, e questo, a proposito, è anche abbastanza semplice.

per semplicità: il terzo parametro (config) è un array associativo in cui possono essere descritti i seguenti elementi:

  • clip - utilizzando questo tasto, è possibile "creare" impostazioni globali, ad esempio, se si desidera avviare automaticamente il buffering (autoBuffering) o la riproduzione (autoPlay), come ridimensionare il contenuto (il ridimensionamento con il valore di fit manterrà le proporzioni originali e verrà utilizzato per il video normale, forse solo). Puoi anche specificare il file in riproduzione (url) e persino sospendere gli eventi (funzioni che verranno chiamate, ad esempio, quando il film inizia a suonare);
  • la playlist è un array normale (elenco). ogni elemento può essere una stringa (in questo caso, la stringa è l'indirizzo della clip riprodotta) o un array associativo. nel secondo caso, il set di dati può essere visto come un set di dati simile al tasto clip dall'elemento precedente, cioè è possibile specificare di utilizzare il buffering, avviare la riproduzione e così via;
  • plugin - serve per espandere le funzionalità standard. Una delle caratteristiche è la capacità di Russizzare l'interfaccia direttamente sul posto.

Ora un piccolo esempio che include una dimostrazione delle possibilità:

<div id = "player" style = "width: 520px; height: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false, ridimensionamento : 'fit'}, playlist: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering: true, autoPlay: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // per manipolare i controlli dei plugin: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // rimuove i pulsanti di riavvolgimento stop: true, // aggiungi il pulsante di arresto scrubber: true // false disabilita lo scorrimento del video}}}); </ script>

Il codice presentato imposta le seguenti impostazioni globali: disabilitazione della riproduzione con avvio automatico, disabilitazione del buffering automatico, ridimensionamento del video per adattarlo alla finestra. Come file riproducibile, vengono utilizzate un'immagine e un video e le impostazioni per l'immagine sono sovrascritte (poiché dovrebbero essere caricate automaticamente). quando si fa clic sull'immagine (o sul pulsante di riproduzione), viene mostrato il video. come puoi vedere, tutto è molto semplice. se vuoi aggiungere un altro video, aggiungi semplicemente un nuovo elemento alla playlist, separato da una virgola. se è richiesta la riproduzione automatica della playlist, nella clip dell'array associativo è impostato, il valore di autoPlay è impostato su true.

si trova la documentazione contenente le funzioni API qui . se qualcuno non capisce l'inglese - non importa, qui tutto è abbastanza chiaro. e dopo aver analizzato il codice sopra, è abbastanza possibile capire cosa c'è nei bacini. Consiglio vivamente una sbirciatina, di sicuro ci sarà un "setting" che sarà richiesto.

esempio può guarda qui . non dimenticare di guardare il codice sorgente (Ctrl + U)

autori

offline 1 settimana

x64 (aka andi)

Commenti: 2842 Pubblicazioni: 395 Registrazione: 02-04-2009Vuoi capire la magia di javascript?