Share
Hvis du noen gang har ønsket å inkludere streamingvideo i designene dine, men ikke vil bry deg med rotete kodeløsninger (eller Flash), har vi to raske og enkle løsninger for deg. I dag skal vi ta en titt på hva hver løsning gir til webdesignere og hvordan du bruker dem begge i dine egne prosjekter.
På overflaten er streaming av video via en nettside ikke noe som mange webdesignere har på toppen av sitt sinn? Dette er forståelig fordi bare de to ordene ("Web" og "Video") innebærer en kunnskapsbase som er best funnet andre steder i Envato-universet?
? Men hva om jeg skulle fortelle deg at du legger til streamingvideo på sidene dine, er nå enklere enn å legge til en jpg. Nå som jeg har din oppmerksomhet? la oss dykke inn i de gode greiene:
Før jeg begynner å gå gjennom trinnvis prosess, la oss først se på historien om "streaming webvideo" fra webdesigners synsvinkel:
La oss late som at du jobber med et prosjekt og du håndterer den grunnleggende frontend-kodingen. Tidligere har å legge til streamingvideo til våre design vært en ganske komplisert prosess - som krever at du kjenner (og har lisens til) Adobe Flash. Hvis du antar at du har Flash, og kjenner deg rundt, må du hente videoen i riktig format, importere den til Flash, gå gjennom den arkaiske prosessen med å sette opp videoen, og deretter eksportere den. Til slutt må du legge det inn riktig på nettstedet ditt. Seasoned Flash veteraner kan være i stand til å trekke dette av raskt, men for de fleste på designsiden av ting er det en hodepine.
En annen mulig løsning ville være å bruke en tjeneste som YouTube eller Vimeo. Dette er greit for de fleste, men hva med de av oss som bare vil vise video på nettet uten merkevaren eller andre tillegg som nettsteder som YouTube og Vimeo legger til? Inntil nylig har det egentlig ikke vært en enkel løsning for dette.
Takket være løftet om HTML 5 Video-røykskjermbildet, fant jeg meg selv å prøve noen av de nye "streaming video-løsningene" nylig. Selvfølgelig var det nettopp da Google brakte webM inn i sin kjærlige omfavnelse, og ting ble mye mer komplisert enn jeg forhandlet for. Jeg overgav meg og stamped off med en "la Gud sortere det ut" holdning. Klart, debatten om streaming webvideo ble ikke løst enda.
For noen år siden skrev jeg en artikkel, The Rise of Flash Video, som oppriktig sporer en lignende debatt som startet da videoen faktisk slo på nettet og Flash Video-standarden tok tak i. Igjen var argumentets hovedpunkt: "Det må være en enklere måte å gjøre dette på." Gjett hva? Nå er det.
I de siste par årene har Adobe vært involvert i Open Source Media Framework. Jeg har alltid funnet OSMF å være et forvirrende utvalg av teknologier og teknikker som ganske ærlig talt gjør tennene mine vondt. Teknologiene er seriøst kule, veldig banebrytende og morsomme å peke med - men de er rettet mot utviklere? og hvis det er en måte å altfor komplisere en enkel løsning, vil hardcore-koderne i verden finne den. OSMF er ikke annerledes. Hvis du vandrer gjennom nettstedet, er det egentlig ikke mye i veien for enkle, plugg og spillløsninger for oss ydmyke designere å bruke.
Det er bare når du går tilbake et par skritt som målet for OSMF-prosjektet blir klart: "for å gi opplevelser av høy kvalitet på videoopptak". Det betyr veldig jevn videoopplasting, veldig slanke spillere og ingen av de ekstra tingene som Vimeo og YouTube har kastet opp. Hvor det hele blir veldig interessant for oss, er det nå vi kan komme inn på moroa, og du trenger ikke å lære noe nytt.
I denne opplæringen skal jeg vise deg to måter å oppnå dette på. Den første er "Drop Dead Simple" og den andre hever nivået til "Dead Simple". For å komme inn i spillet er alt du trenger å gjøre, å laste opp en video (en er vedlagt denne opplæringen for hver løsning) til en katalog på et nettsted. La oss komme i gang:
Denne delen er ganske enkel - bare last opp en video til din webserver ved hjelp av et FTP-program eller noe lignende. For denne demoen bruker vi filen "Stockhorn.f4v". Alt du trenger for å komme hit er nettadressen til videoen din. Keep er et sted du kan kopiere / lime inn til neste trinn.
I hovedsak tilbyr dette nettstedet en OSMF-spiller for massene. Hvis du vil heve en mp4, flv eller f4v fil i din nettside uten å vite en slikk av Flash, Actionscript eller Flex, er dette stedet for deg. Det du trenger å gjøre er å klikke på knappen Konfigurer Flash Media Playback nederst på siden. Dette åpner Flash Media Playback Setup-siden.
Du må angi den absolutte banen til videoen og filens filtype. De tre formatene som brukes av Flash er flv, f4v og H.264. Hvis du er usikker på hvordan disse opprettes, kan du sjekke ut min Flash Video Basics-serie over på active.tutsplus. Du må også legge inn videoens bredde og høydeverdier - verdiene for vedlagte video er 720 X 405. Når du har gjort det, klikker du på Forhåndsvis-knappen i Forhåndsvis spiller-området, og videoen din skal begynne å spille.
Hvis du bruker Dreamweaver, åpner du siden, velger du koder og bare lim inn koden fra spilleren inn i kodevisningen. Hvis du tester siden, ser du videoen din i nettleseren. På dette tidspunktet trenger du bare å laste opp html-siden til skjermbildet som inneholder videoen på nettstedet ditt.
Det er disse trinnene, og hvis du går over her vil du se videoen som spilles. Det eneste jeg gjorde annerledes var å inkludere en plakatramme. Mer om det i neste avsnitt.
Som jeg sa på toppen, kommer jeg ikke til å gå "all techie" her, men det er en annen måte som er litt mer komplisert enn det jeg bare viste som er verdt å merke seg, kalt Strobe Media Playback.
Strobe Media Playback bruker samme tilnærming som Flash Media, men det er tonn mer strøm under hetten. For eksempel kan du bruke flere bithastigheter til å oppdage tilkoblinger og mate den riktige viden basert på brukerens tilkoblingshastighet. Du kan tilpasse kontrollene, bruke den til å spille av lyd, vise jpg-er og omtrent alle medier som vil vises i en Flash SWF. I dette eksemplet skal vi ta samme "no code" -tilnærming som vi gjorde i den forrige løsningen, men jeg skal legge til en "vri". Hvis du vil jobbe sammen med meg, vil alle filene du trenger, være i Strobe-mappen i denne opplæringen.
Samme som før - bare last opp en video til din webserver ved hjelp av et FTP-program eller noe lignende. For denne delen av demoen bruker vi filen "GeorgeSquare.mp4". Alt du trenger for å komme hit er nettadressen til videoen din. Keep er et sted du kan kopiere / lime inn til neste trinn.
Den versjonen du vil ha, er Strobe Media Playback 1.5.1. Med Strobe blir betaversjoner kalt "Sprints", og den nåværende Sprint inkluderer støtte for slike ting som den nye Stage Video-funksjonen til Flash Player. Når du pakker ut filen, har du et par valg: Legg mappen til roten av datamaskinens webserver eller last den opp til roten til nettstedet ditt. Jeg opprettet en katalog med navnet "smp" og lastet opp alle filene til min webserver.
En plakatramme er en flott mulighet til å gjøre noen merkevarebygging med en video. Hvis den første rammen av videoen bare skal sitte der og ligne et bilde, hvorfor ikke sette det bildet på jobb. I dette tilfellet åpnet jeg bare et nytt Fireworks CS5-dokument som matchet dimensjonene til videoen - 1280 ved 720-, samlet eiendelene og lagret det som et flatt .jpg-bilde i samme mappe som videoen.
Denne mappen er plassert i Strobe-nedlastingen. Når den åpnes, vil den se ganske kjent. Hovedforskjellen mellom dette dokumentet og det du møtte med Flash Media Playback er valgene er langt mer omfattende og spilleren er en du eier? ikke en som ligger på Adobes nettsted. Når siden åpnes vil du se at det er mange valg. De viktigste, i denne veiledningens formål, er:
Embed parametere:
Flash vars:
Hvis du vil ha en mer fullstendig forklaring på denne siden og Flash Vars, har min kollega Joseph Labreque lagt fram en ganske omfattende teknisk oversikt over Strobe Media Playback på active.tutsplus.
Du bør se at plakatrammen din vises i spilleren. Hvis du ikke vil ha den store Play-knappen over plakatrammen, stiller du PlayButtonOverlay-egenskapen til False i Flash vars-området.
Når filen åpnes, spiller filmen. Den veldig fine ting er at alle kontrollene er aktive - noe som betyr at hvis du bruker en HD mp4-fil, vokser videoen for å fylle skjermen med liten eller ingen pixelisering.
Endelig! Velkommen til verden av streaming Flash-video uten at du trenger å vite noe om Flash. Klikk her for å se dette prosjektet på nettstedet mitt.
Som jeg påpekte i begynnelsen av dette stykket, tror jeg virkelig ikke Flash Video skal forsvinne helst snart. Likevel, med advent av et flerscreenmiljø, får du den samme videoen til å spille på, og det er nå mulig å bruke en Droid, iPhone, Samsung Galaxy Tablet og HD-TV-en. Dette gjør selvsagt webdesignere litt nervøse fordi? vi vil? fordi innebygd streaming video i det siste har vært ganske teknisk. Det er egentlig ikke tilfelle lenger! Som jeg påpekte i dette stykket, kan du kopiere og lime inn tekst til en webside, og Adobe har et par løsninger for deg.
Hvis du finner dette for å være interessant og virkelig ønsker å grave inn i OSMF eller Strobe, burde du virkelig begynne med Joeseph Labreques serie som sparket av på aktiv. tutsplus, da han går inn i mye mer detalj om de tekniske tingene rundt streaming video debatten.
Accentsconagua