Treat seerne til en Full Screen HD Video Experience
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne nybegynner til middels opplæringen jeg skal vise deg hvordan du skal spille av HD-video uten den uunngåelige uskarphet som oppstår når videoen er forstørret.
Grunnen for dette er at jeg får litt lei av å besøke YouTube eller andre nettsteder som nåværende HD-video med en full skjerm alternativet bare for å oppdage, når jeg klikker på fullskjermknappen, at jeg trenger plutselig resept for brillene mine endret seg.
Spørsmålet er ikke videoen, men hvordan Flash Player håndterer prosessen med å gå full skjerm. La oss finne ut hvordan du gjør ting riktig ..
Innledning
Når du spiller video i Flash Player, video, for alle praktiske formål, er lagt inn på scenen. Klikk på fullskjerm knappen og scenen blir større. Når scenen blir større den bringer video sammen med det. Forstørre en 720 x 480 video til 1280 med 720 og er det noe rart at videoen blir uklar?
Adobe kjempet med dette problemet da de ble innføre muligheten til å spille i full HD video via Flash Player. Deres løsning, som ble introdusert i Flash Player 9.0.115.0, var svært elegant. I stedet for å utvide scenen, hvorfor ikke "sveve" vid i et rektangel "over" scenen og har designer eller utvikler bestemme om du vil forstørre scenen eller bare en bit av det. Dette oppnås gjennom en annen del av smart ingeniør på Adobes del: Maskinvareakselerasjon og skalering
Maskinvareakselerasjon er påført gjennom Flash Player.. Hvis du høyreklikker (PC) eller ctrl-klikke (Mac) på en swf spiller i en nettside du vil åpne Flash Player kontekstmenyen. Velg Innstillinger Kjøpe og du vil bli presentert med innstillingene vinduet som vises i bilde 1. Hvis du velger Aktiver maskinvareakselerasjon Etter å ha gitt deg orientering om hvordan. vi fikk du leser denne opplæringen, gjør du følgende for å lage en full-HD-video erfaring: Følger med nedlastingen er en .mp4 fil- Vultures .mp4. Det er et klipp fra en TV-serie produsert av min College, Humber Institute of Technology og Advanced Learning. Vi skal bruke for prosjektet denne filen skjønt mov, F4V og fysisk store FLV filer kan også brukes. Du har kanskje hørt mye "buzz" rundt HD video og MP4-format over siste par årene, og lurte på hva skravling handler om. Her er en kort "elevator pitch": Nøkkelen til MP4-format, er AVC /H.264 video standard introdusert for Flash Player i august 2007. .mp4 standard, for å være presis, er kjent som MPEG-4 som er en internasjonal standard som er utviklet av Motion Pictures Expert Group (MPEG) og formatet har også ISO anerkjennelse. Hva gjør disse filene så attraktiv for Flash-designere og utviklere er at MPEG-4-filer er ikke enhetsavhengige. De kan like gjerne bli spilt på en HD-TV, iPod eller Playstation som de kan spilles i en nettleser. Også, takket være maskinvareakselerasjon og multithreading støtte innebygd i Flash Player, kan du spille av video til enhver oppløsning og bitdybde opp til, og med full HD 1080p-oppløsning du ser på HD TV. Den ene aspektet av MPEG-4-standarden som jeg finner ganske interessant er at, som XFL format bare kommer i bruk i hele CS4 suite, er det en "container" format. Hva er ment med dette er MP4-filer kan lagre flere typer data på en rekke spor i filen. Hva den gjør er å synkronisere og flette dataene betyr en .mp4 fil kan også inneholde metadata, kunstverk, teksting og så videre som potensielt kan nås av Flash. Det er den gode nyheten. Den dårlige nyheten er at selv om den MPEG-4 beholder kan inneholde flere lyd- og videospor, Flash Player foreløpig bare spiller en av hver, og ignorerer resten. Den andre bit av dårlige nyheter er dette formatet ikke støtter gjennomsiktighet mening dersom du ønsker å legge til en alfakanal, er du tilbake til FLV format. Til slutt, H.264 MP4-filer krever kraftig prosessering makt. Adobe har vært ganske klar på å informere oss om dette innholdet vises best på dual core PC-er og Mac-maskiner. Skiftet til disse prosessorene har pågått i et par år, men det vil fortsatt være et par år før alle datamaskiner vil være i stand til å styre prosessoren krever dette formatet krever. Jeg har så vidt skummet overflaten av dette formatet. Hvis du ønsker å ta en "dypdykk" i dette formatet, sjekk ut H.264 For resten av oss er skrevet av Kush Amerasinghe hos Adobe. Det er en enorm primer for de av dere nye til denne teknologien Åpne BigItUp.fla Legg til følgende Action til handlinger lag: Vi starter med å bringe i geometri pakken og Stage klassen for å ta "svevende" video til full skjerm. De neste to variabler - MySound og MyVideo - kommer til å bli brukt til å angi volumnivået på lyden og for å lage en video Object Med det housekeeping ut av måten vi sette opp NetConnection. Hotell og Netstream Legg til følgende Action: Den første funksjonen lar oss gjøre noen feilsjekking. Ikke alle mp4 filer er skapt like, og hvis videoen ikke spille det ville være fint å vite hva problemet kan være. I dette tilfellet skal vi lytte etter et par feilmeldinger fra Netstream klassen som er relevante for mp4-filer. Den første er en sjekk for å sørge for at filen ikke er skadet eller er et format som ikke støttes. Bare fordi en fil vil spille i Quicktime player betyr ikke det vil spille i Flash. Det neste man gjør at lyd- og videospor støttes. For eksempel hvis H.264-koding ikke er brukt på video-sporet eller AAC-koding er ikke brukt på lydsporet, vil du ha problemer. Den neste funksjonen går inn i videofilen metadata for å oppnå bredde og høyde verdier for Video Object Skriv inn følgende Action: Det er der den "magiske" skjer. Denne funksjonen lager rektangelet brukes til å holde på videoen og dens størrelse er satt til å matche de av Video Object dimensjoner trakk seg ut av den andre funksjonen i forrige kodeblokken. Den neste linjen setter fullScreenSourceRect Den betingede utsagn som utgjør resten av kodeblokken sjekker den nåværende tilstanden av scenen størrelse fra normal til full skjerm eller vice versa. Dette er hvordan videoen går full skjerm. Video Object er lagt inn i denne kilden rect, ikke på scenen, noe som betyr at den kan utvide eller kontrakt uten scenen gjør det samme og "fuzzing" videoen. Den siste linjen bruker knappen på scenen for å gå . fullskjerm Skriv inn følgende Action: Den første kodeblokk forteller Flash variabelen "MyVideo" er navnet på en Video Object, som ligger 185 piksler fro venstre kant av den enorme scenen og er 5 piksler ned fra toppen. addChild () Den endelige kodeblokk ser inn videoens lydspor som blir matet inn i prosjektet gjennom Netstream Hotell og senker lydstyrken til 80% Lagre filen til samme mappe som video. Normalt på dette stadiet av opplæringen Jeg vil også fortelle deg å teste swf. Du kan, men knappen vil ikke fungere. Det beste du kan forvente å se videoavspilling i swf. Full Screen-funksjonen er drevet av HTML wrapper av swf, ikke Flash. La oss håndtere at en Velg Fil > Publish Settings. Når Publish Settings dialogboksen åpnes velger SWF og HTML alternativer Klikk på fanen Flash. Velg Flash Player 9 eller Flash Player 10 i spiller pop ned. Husk HD video kan kun spilles i Flash Player 9 eller nyere Klikk på HTML-fanen. . I Mal pop gardinmenyen velger Flash Only-Tillat Full Screen Klikk på Publiser-knappen for å opprette SWF og HTML-filen Lagre filen, avslutter Flash og åpne HTML-siden i en nettleser. Kom igjen, klikker du på " Big it up! Hva om det? Reelle Flash designere og utviklere bruker ikke noen "steenking" komponenter. I desember 2007, Adobe stille lansert Update 3 for Flash Player 9. Jeg bruker ordet "stille" fordi blandet med de vanlige feilrettinger og tweaks, gled de i en oppdatert versjon av FLVPlayback komponent som tillot det å spille av HD-video. Slik gjør du: Åpne en ny Flash Actionscript 3.0 dokument og lagre det i samme mappe som den Vultures video Velg Vindu > Komponenter Åpne Component Inspector. Du må gjøre to ting her. Velg SkinUnderAllNoCaption.swf Velg Modify > Dokument og klikk på Innhold Selvfølgelig, nå som du har endret scenen dimensjoner komponenten er henging av scenen. Velg komponenten og i Properties panelet satt X- og Y-koordinatene til 0. Velg Fil > Publish Settings og velge SWF og HTML filtyper Klikk på fanen Flash og velg Flash Player 9. Klikk på HTML-fanen og velg Flash Only . - Tillat Full Screen i Maler pop ned Klikk på knappen Publiser. Når SWF og HTML-filen er publisert klikk OK. Lagre filen og avslutt Flash Åpne HTML-fil i en nettleser. Klikk på Full Screen-knappen for å starte i fullskjermmodus. I denne opplæringen har jeg vist deg to måter greit å gå inn i fullskjermmodus med Flash. Den første metoden brukes Actionscript for å gjøre dette mulig, og nøkkelen var å skape et rektangel som "svevde" over scenen og ble brukt til å holde videoen. Det andre eksemplet viste deg hvordan du bruker FLVPlayback komponent for å gå fullskjerm. Som du sikkert har oppdaget, er det avgjørende for begge prosjektene var ikke Action men HTML wrapper som muliggjorde fullskjermsavspilling. Disse tutorials alltid fungerer locallly men jeg er at du lurer på om de faktisk ville fungere online. Jeg har lagt ut både for å bevise at "Ja ja, det kan gjøres." Koden tilnærming i det første eksemplet finner du her. Videoen er vennlig levert av Adobe og Red Bull, og er en full 1080p produksjon. De Vultures vises i et eksempel som bruker komponenten her. Anmeldelser
du er i stand til å se det i full-HD-video. Hvis du lar det være umarkert klikke en full skjerm knappen, får spilleren bruker Skalering API som brukes når en FLV-fil er tatt ut til full skjerm. De pene ting om dette er at selv om du har valgt maskinvareakselerasjon, er det bare brukt når det trengs. Så når en Full Screen-knappen klikkes bare rektangelet og det innholdet - en video i dette tilfellet - er skalert til full skjerm og maskinvare akselerasjon tar over for å spille av videoen
Trinn 1: Last ned den treningsfiler
Trinn 2:.! Big It Up
filen i nedlastingen. Hvis dette er første gang du arbeider med en H264 fil eller gå fullskjerm, kan du finne Flash scenen dimensjoner - 1 050 av 500 - for å være ganske massiv. Vi trenger scenen plass til videoen som har en fysisk størrelse på 854 x 480, og for å gi rom for den knappen i øvre venstre hjørne av scenen
Trinn 3:. Geometry
import flash.geom *; import flash.display.Stage;. Var MySound: SoundTransform; Var MyVideo: Video; Var nc: NetConnection = new NetConnection (); nc.connect (null); Var ns: Netstream = new Netstream (nc); ns.client = dette; btnBig.buttonMode = true;
gjenstander som vil tillate at videoen skal spilles. Den siste linjen setter MovieClip brukes til å få videoen til full skjerm i buttonMode
Trinn 4:. Funksjoner
ns.addEventListener (NetStatusEvent.NET_STATUS, netStatusHandler), funksjon netStatusHandler (evt: NetStatusEvent): void {if (evt.info.code == "NetStream.FileStructureInvalid") {trace ("The MP4 filstrukturen er ugyldig."); } Else if (evt.info.code == "NetStream.NoSupportedTrackFound") {trace ("The MP4 inneholder ingen støttede spor"); }} Funksjon onMetaData (md: Object): void {myVideo.width = md.width; myVideo.height = md.height; }
Trinn 5:. goFullScreen
funksjon goFullScreen (evt: Object): void {var scalingRect: rektangel = new rektangel (myVideo.x, myVideo.y, myVideo.width, myVideo.height); stadium ["fullScreenSourceRect"] = scalingRect; if (stage.displayState == StageDisplayState.NORMAL) {stage.displayState = StageDisplayState.FULL_SCREEN; } Else {stage.displayState = StageDisplayState.NORMAL; }}; btnBig.addEventListener (MouseEvent.CLICK, goFullScreen); <
eiendom av scenen til dimensjonene på rektangelet nettopp opprettet.
Trinn 6: MyVideo
MyVideo = new Video (); myVideo.x = 185; myVideo.y = 5; addChild (MyVideo); myVideo.attachNetStream (ns); ns.play ("Vultures.mp4"); MySound = ns.soundTransform; mySound.volume = 0,8; ns.soundTransform = MySound;
metoden setter Video Object på scenen og de resterende to linjene koble video objektet til Netstream Hotell og starte videoen spilles.
Trinn 7. Spar
Trinn 8:. Publish Settings
Trinn 9:. Player versjon
Trinn 10:. HTML
Trinn 11:. Test
" -knappen.
Hva med Component?
Trinn 12:. Nytt dokument
Trinn 13: FLVPlayback Component
og i videoen komponenter, dra en kopi av FLVPlayback
komponent til scenen
Trinn 14:. Component Inspektør
i huden området, i kildeområdet navigere til Vultures.mp4
fil og legge den til innholdsbanedialogen boks. Klikk kampen kilde dimensjoner sjekke boksen og klikk OK. Flash vil gå inn video og ta tak i metadata. Når det er ferdig, vil dialogboksen lukkes og komponenten vil vokse til dimensjonene på videoen. Lukk Component Inspector
Trinn 15:. Endre > Dokument
knappen for å endre størrelsen på scenen til størrelsen på komponenten .... liksom. Når fasen er satt til størrelsen av komponenten det bare endrer størrelsen til størrelsen på video. Huden vil bli hengende ved bunnen av scenen som betyr at det ikke kommer til å være synlig i en nettside. Endre høyden verdien til 525 piksler for å imøtekomme huden. Klikk på OK for å godta endringen.
Trinn 16:. Publish Settings
Trinn 17: Player versjon
Trinn 18: HTML
Trinn 19: Publiser
Trinn 20:. Test
Konklusjon