Share
Se hai mai desiderato includere lo streaming video nei tuoi progetti, ma non volevi preoccuparti di soluzioni di codice disordinato (o Flash), abbiamo due soluzioni facili e veloci per te. Oggi daremo un'occhiata a ciò che ciascuna soluzione offre ai web designer e come usarli entrambi nei propri progetti.
In apparenza, lo streaming di video attraverso una pagina Web non è qualcosa che molti web designer hanno in cima alle loro menti? Questo è comprensibile perché solo queste due parole ("Web" e "Video") implicano una base di conoscenza che è meglio trovare altrove nell'universo di Envato?
? Ma cosa succede se ti dicessi che aggiungere video in streaming alle tue pagine è più semplice che aggiungere un jpg. Ora che ho la tua attenzione? tuffiamoci nella roba buona:
Prima di iniziare a camminare attraverso il processo passo-passo, vediamo prima la storia di "streaming web video" dal punto di vista dei web designer:
Supponiamo che tu stia lavorando a un progetto e che tu stia gestendo la codifica di base del front-end. In passato, l'aggiunta di video in streaming ai nostri progetti era un processo piuttosto complicato, che richiedeva di conoscere (e avere una licenza per) Adobe Flash. Supponendo di avere Flash e di conoscerlo, devi quindi ottenere il video nel formato giusto, importarlo in Flash, passare attraverso il processo arcaico di impostazione del video e quindi esportarlo. Infine, dovresti incorporarlo correttamente nel tuo sito web. I veterani esperti di Flash potrebbero essere in grado di farlo velocemente, ma per la maggior parte delle persone dal punto di vista del design, è un mal di testa.
Un'altra soluzione possibile sarebbe utilizzare un servizio come YouTube o Vimeo. Questo va bene per la maggior parte delle persone, ma per quelli di noi che vogliono semplicemente visualizzare video sul web senza il branding o altri extra che siti come YouTube e Vimeo aggiungono? Fino a poco tempo fa, non c'era davvero una soluzione semplice per questo.
Grazie alla promessa della cortina fumogena di HTML 5 Video, mi sono ritrovato a provare alcune delle nuove "soluzioni di streaming video" di recente. Certo, è stato proprio quando Google ha portato il webM nel suo abbraccio amorevole e le cose sono diventate molto più complicate di quanto avessi voluto. Mi sono essenzialmente arreso e calpestato con un atteggiamento di "lascia che Dio risolva". Chiaramente, il dibattito sullo streaming di video sul web non è stato ancora risolto.
Qualche anno fa ho scritto un articolo, The Rise of Flash Video, che ricorda in modo inquietante un dibattito simile iniziato quando il video ha effettivamente colpito il web e lo standard Flash Video ha preso piede. Ancora una volta, il punto cruciale dell'argomento era: "Ci deve essere un modo più semplice per farlo". Indovina un po? Ora c'è.
Negli ultimi due anni, Adobe è stata coinvolta nell'Open Source Media Framework. Ho sempre trovato OSMF come una gamma sconcertante di tecnologie e tecniche che, francamente, mi fanno male i denti. Le tecnologie sono davvero interessanti, molto all'avanguardia e divertenti da usare - ma sono rivolte agli sviluppatori? e se c'è un modo per complicare eccessivamente una soluzione semplice, i codificatori più esperti del mondo lo troveranno. OSMF non è diverso. Se ti aggiri per il sito, non c'è davvero molto in termini di soluzioni semplici, plug and play per noi umili progettisti da usare.
È solo quando fai un passo indietro di un paio di passi che l'obiettivo del progetto OSMF diventa chiaro: "fornire esperienze di riproduzione video di alta qualità". Ciò significa caricamento del video davvero fluido, lettori davvero fluidi e nessuna delle cose extra lanciate da Vimeo e YouTube. Dove tutta questa cosa diventa davvero interessante per noi è che ora possiamo entrare nel divertimento e non dovrai imparare nulla di nuovo.
In questo tutorial ti mostrerò due modi per farlo. Il primo è "Drop Dead Simple" e il secondo alza il livello in "Dead Simple". Per entrare nel gioco tutto ciò che devi fare è caricare un video (uno è allegato a questo tutorial per ogni soluzione) in una directory su un sito web. Iniziamo:
Questa parte è piuttosto semplice: basta caricare un video sul server Web utilizzando un programma FTP o qualcosa di simile. Per questa demo useremo il file "Stockhorn.f4v". Tutto quello che devi ottenere è l'URL del tuo video. Keep è da qualche parte che puoi copiare / incollare per il prossimo passo.
Essenzialmente questo sito offre un player OSMF per le masse. Se vuoi spostare un file mp4, flv o f4v nella tua pagina web senza conoscere una leccata di Flash, Actionscript o Flex, questo è il posto giusto per te. Quello che devi fare è fare clic sul pulsante Configure Flash Media Playback nella parte inferiore della pagina. Verrà aperta la pagina di configurazione di riproduzione di Flash Media.
Devi inserire il percorso assoluto per il video e l'estensione del file del video. I tre formati utilizzati da Flash sono flv, f4v e H.264. Se non sei sicuro di come vengono creati, non esitare a controllare le mie serie di Nozioni di base sui video Flash su active.tutsplus. È inoltre necessario immettere i valori di larghezza e altezza del video: i valori per il video incluso sono 720 X 405. Dopo aver fatto ciò, fare clic sul pulsante Anteprima nell'area Preview Player e il video dovrebbe iniziare a riprodurre.
Se si sta utilizzando Dreamweaver, aprire la pagina, selezionare tag e semplicemente incollare il codice dal lettore nella vista Codice. Se esegui il test della pagina, il tuo video verrà riprodotto nel browser. A questo punto devi solo caricare la pagina html nella rubrica contenente il video sul tuo sito.
Questi sono i passi e se vai a vedere qui vedrai il video in riproduzione. L'unica cosa che ho fatto in modo diverso era includere una cornice per poster. Maggiori informazioni su questo nella prossima sezione.
Come ho detto all'inizio, non ho intenzione di andare "tutto techie" qui, ma c'è un altro modo leggermente più complicato di quello che ho appena dimostrato che vale la pena notare, chiamato Riproduzione media stroboscopica.
Strobe Media Playback utilizza lo stesso approccio di Flash Media, ma c'è un sacco di potenza sotto il cofano. Ad esempio, è possibile utilizzare più bitrate per rilevare le connessioni e alimentare il video in base alla velocità di connessione degli utenti. Puoi personalizzare i controlli, usarlo per riprodurre audio, visualizzare jpg e praticamente tutti i file multimediali che appariranno in un file SWF Flash. In questo esempio adotteremo lo stesso approccio "no code" come abbiamo fatto nella soluzione precedente, ma aggiungerò una "svolta". Se vuoi lavorare con me, tutti i file di cui avrai bisogno sono nella cartella Strobe nel download di questo tutorial.
Come prima: basta caricare un video sul server Web utilizzando un programma FTP o qualcosa di simile. Per questa parte della demo useremo il file "GeorgeSquare.mp4". Tutto quello che devi ottenere è l'URL del tuo video. Keep è da qualche parte che puoi copiare / incollare per il prossimo passo.
La versione che desideri è la versione 1.5.1 di Strobe Media Playback. Con Strobe, le versioni beta si chiamano "Sprint" e lo Sprint corrente include il supporto per cose come la nuova funzionalità Stage Video di Flash Player. Quando decomprimi il file hai un paio di scelte: posiziona la cartella alla radice del server web del tuo computer o caricala alla radice del tuo sito web. Ho creato una directory chiamata "smp" e ho caricato tutti i file sul mio server web.
Una cornice per poster è una grande opportunità per fare un po 'di branding con un video. Se il primo fotogramma del video è seduto lì e assomiglia ad un'immagine, perché non mettere quell'immagine al lavoro. In questo caso ho semplicemente aperto un nuovo documento di Fireworks CS5 che corrisponde alle dimensioni del video (1280 per 720), ha assemblato le risorse e le abbiamo salvate come immagine jpg appiattita nella stessa cartella del video.
Questa cartella si trova nel download di Strobe. Quando si apre sembrerà piuttosto familiare. La principale differenza tra questo documento e quello che hai incontrato con Flash Media Playback è che le scelte sono molto più ampie e il giocatore è quello che possiedi? non uno situato sul sito di Adobe. Quando la pagina si apre vedrai che ci sono molte scelte. I più importanti, ai fini di questo tutorial sono:
Incorpora parametri:
Flash vars:
Se vuoi una spiegazione più completa di questa pagina e il Flash Vars, il mio collega Joseph Labreque, ha pubblicato una panoramica tecnica piuttosto ampia di Strobe Media Playback su active.tutsplus.
Dovresti vedere la cornice del tuo poster apparire nel player. Se non si desidera che il grande pulsante di riproduzione sul frame del poster imposti la proprietà playButtonOverlay su False nell'area di Flash vars.
Quando il file si apre, riproduci il film. La cosa veramente bella è che tutti i controlli sono attivi, il che significa che se si utilizza un file mp4 HD, il video aumenterà fino a riempire lo schermo con una pixelizzazione minima o nulla.
Finalmente! Benvenuti nel mondo dello streaming di video Flash senza aver bisogno di sapere nulla su Flash. Clicca qui per vedere questo progetto sul mio sito.
Come ho sottolineato all'inizio di questo pezzo, non penso proprio che Flash Video sparirà presto. Tuttavia, con l'avvento di un ambiente multi-schermo, è possibile riprodurre lo stesso video su un Droid, iPhone, Samsung Galaxy Tablet e il tuo set TV HD. Questo ovviamente rende i web designer un po 'nervosi perché? bene? perché l'incorporamento di video in streaming in passato è stato piuttosto tecnico. Non è più così! Come ho sottolineato in questo articolo, se riesci a copiare e incollare il testo in una pagina Web, Adobe ha un paio di soluzioni per te.
Se ritieni che questo sia interessante e vuoi veramente scavare in OSMF o in Strobe, dovresti iniziare con la serie di Joeseph Labreque che è iniziata in attivo. tutsplus, mentre approfondisce molti aspetti tecnici riguardanti il dibattito sul video in streaming.
Accentsconagua