Share
Om du någonsin velat inkludera strömmande video i dina mönster, men inte vill bry dig om rotiga kodlösningar (eller Flash), har vi två snabba och enkla lösningar för dig. Idag ska vi ta en titt på vad varje lösning erbjuder till webbdesigners och hur man använder dem båda i egna projekt.
På ytan är strömmande video via en webbsida inte något som många webbdesigners har högst upp i sitt sinne? Detta är förståeligt eftersom bara de två orden ("Web" och "Video") innebär en kunskapsbas som bäst finns någon annanstans i Envato-universum?
? Men vad händer om jag skulle berätta för dig att lägga till streamingvideo på dina sidor är nu lättare än att lägga till en jpg. Nu när jag har din uppmärksamhet? låt oss dyka in i de bra grejerna:
Innan jag börjar gå igenom steg för steg processen, låt oss först titta på historien om "streaming webvideo" ur webbdesigners synvinkel:
Låt oss låtsas att du jobbar med ett projekt och du hanterar den grundläggande fronten-kodningen. Tidigare har det blivit en ganska komplicerad process att lägga till streamingvideo i våra mönster, vilket kräver att du känner till (och har licens till) Adobe Flash. Om du antar att du har Flash och känner din väg runt det måste du hämta videon i rätt format, importera den till Flash, gå igenom den arkaiska processen för att ställa in videon och sedan exportera den. Slutligen måste du bädda in det ordentligt på din webbplats. Seasoned Flash veteraner kanske kan dra av det snabbt, men för de flesta på designsidan är det huvudvärk.
En annan möjlig lösning skulle vara att använda en tjänst som YouTube eller Vimeo. Det här är bra för de flesta, men hur är det med dem som bara vill visa video på webben utan varumärket eller andra extras som webbplatser som YouTube och Vimeo lägger till? Fram till nyligen har det verkligen inte varit en enkel lösning för detta.
Tack vare löftet om HTML 5 Video-rökkontrollen, fann jag mig själv att prova några av de nya "streaming video-lösningarna" nyligen. Det var ju självklart när Google lade webM in i sin kärleksfulla omtanke och saker blev mycket mer komplicerade än vad jag bargained för. Jag övergav i huvudsak och stamped off med en "Låt Gud sortera ut" attityd. Tydligen har debatten om strömmande webbvideo ännu inte lösts.
Några år tillbaka skrev jag en artikel, The Rise of Flash Video, som spontant spårar en liknande debatt som startade när videoen faktiskt slog på nätet och Flash Video-standarden tog tag i. Återigen var argumentets kärnpunkt: "Det måste bli ett enklare sätt att göra det här." Gissa vad? Nu finns det.
Adobe har under de senaste åren varit med i Open Source Media Framework. Jag har alltid funnit OSMF för att vara ett förvirrande utbud av tekniker och tekniker som helt uppriktigt gör mina tänder ont. Tekniken är allvarligt cool, mycket nyskapande och kul att prata med - men de riktar sig till utvecklare? och om det finns ett sätt att alltför komplicera en enkel lösning kommer världens hardcore-kodare att hitta den. OSMF är inte annorlunda. Om du vandrar genom webbplatsen finns det verkligen inte mycket i vägen för enkla, plug-and-play-lösningar för våra ödmjuka designers att använda.
Det är bara när du går tillbaka ett par steg som målet för OSMF-projektet blir klart: "för att ge högkvalitativa videouppspelningsupplevelser". Det betyder verkligen jätte video laddning, riktigt smarta spelare och ingen av de extra sakerna som uppspelas av Vimeo och YouTube. Där det här hela vägen blir väldigt intressant för oss är det nu vi kan komma in på det roliga och du behöver inte lära dig något nytt.
I denna handledning ska jag visa dig två sätt att uppnå detta. Den första är "Drop Dead Simple" och den andra höjer nivån till "Dead Simple". För att komma in i spelet är allt du behöver göra för att ladda upp en video (en är bifogad med denna handledning för varje lösning) till en katalog på en webbplats. Låt oss börja:
Den här delen är ganska enkel - ladda bara upp en video till din webbserver med ett FTP-program eller något liknande. För denna demo använder vi filen "Stockhorn.f4v". Allt du behöver för att komma hit är webbadressen till din video. Behåll är någonstans du kan kopiera / klistra in för nästa steg.
I huvudsak erbjuder denna webbplats en OSMF-spelare för massorna. Om du vill höja en mp4-, flv- eller f4v-fil till din webbsida utan att känna en slick av Flash, ActionScript eller Flex, är det här platsen för dig. Vad du behöver göra är att klicka på knappen Konfigurera Flash Media Playback längst ner på sidan. Detta öppnar Flash Media Playback Setup-sidan.
Du måste ange den absoluta sökvägen till videon och videoens filtillägg. De tre format som används av Flash är flv, f4v och H.264. Om du är osäker på hur dessa skapas kan du kolla in min Flash Video Basics-serie över på active.tutsplus. Du måste också ange videoens bredd och höjdvärden - värdena för den bifogade videon är 720 X 405. När du har gjort det, klicka på förhandsgranskningsknappen i förhandsgranskningsområdet och din video ska börja spela.
Om du använder Dreamweaver öppnar du sidan, väljer du taggar och klistra in koden från spelaren i kodvisningen. Om du testar sidan visas din video i webbläsaren. Vid denna tidpunkt behöver du bara ladda upp html-sidan till diktningen som innehåller videon på din webbplats.
Det här är stegen och om du huvudet härifrån ser du videon som spelas. Det enda jag gjorde annorlunda var att inkludera en affischram. Mer om det i nästa avsnitt.
Som jag sa överst, kommer jag inte att gå "all techie" här, men det finns en annan väg som är lite mer komplicerad än vad jag just visat som är värt att notera, kallad Strobe Media Playback.
Strobe Media Playback använder samma tillvägagångssätt som Flash Media, men det finns en ton mer ström under huven. Till exempel kan du använda flera bitrater för att upptäcka anslutningar och mata rätt videon baserat på användarens anslutningshastighet. Du kan anpassa kontrollerna, använda den för att spela upp ljud, visa jpg och nästan alla media som kommer att visas i en Flash SWF. I det här exemplet kommer vi att ta samma "no code" -strategi som vi gjorde i den tidigare lösningen, men jag ska lägga till en "twist". Om du vill arbeta tillsammans med mig är alla filer du behöver i Strobe-mappen i den här handledningens nedladdning.
Samma som tidigare - ladda bara upp en video till din webbserver med ett FTP-program eller något liknande. För den här delen av demo använder vi filen "GeorgeSquare.mp4". Allt du behöver för att komma hit är webbadressen till din video. Behåll är någonstans du kan kopiera / klistra in för nästa steg.
Den version du vill ha är Strobe Media Playback 1.5.1 release. Med Strobe betas betaversioner "Sprints" och det aktuella Sprint-programmet innehåller stöd för sådana saker som den nya Stage Video-funktionen i Flash Player. När du plockar ut filen har du ett par val: placera mappen i roten till datorns webbserver eller ladda upp den till roten på din webbplats. Jag skapade en katalog med namnet "smp" och laddade upp alla filer till min webbserver.
En affischram är en utmärkt möjlighet att göra lite varumärke med en video. Om den första ramen på videon bara kommer att sitta där och likna en bild, varför inte sätta den bilden på jobbet. I det här fallet öppnade jag helt enkelt ett nytt Fireworks CS5-dokument som matchade videoens dimensioner - 1280 vid 720-, samlade tillgångarna och sparade det som en utplattad .jpg-bild i samma mapp som videon.
Den här mappen finns i Strobe-nedladdningen. När den öppnas ser den ganska väl ut. Huvudskillnaden mellan det här dokumentet och det du stött på med Flash Media Playback är att valen är mycket mer omfattande och spelaren är en du äger? inte en som finns på Adobes webbplats. När sidan öppnas ser du att det finns många val. De viktigaste, för syftet med denna handledning är:
Bädda in parametrar:
Flash vars:
Om du vill ha en mer fullständig förklaring av den här sidan och Flash Vars, har min kollega Joseph Labreque lagt fram en ganska omfattande teknisk översikt över Strobe Media Playback på active.tutsplus.
Du borde se din affischram visas i spelaren. Om du inte vill ha den stora Play-knappen över posterramen ställer du in egenskapen playButton-förlängning till False i området Flash.
När filen öppnas spelar du upp filmen. Den riktigt snygga är att alla kontrollerna är aktiva - vilket innebär att om du använder en HD mp4-fil växer din video för att fylla skärmen med liten eller ingen pixelisering.
Till sist! Välkommen till världen av streaming Flash-video utan att du behöver veta någonting om Flash. Klicka här för att se detta projekt på min webbplats.
Som jag påpekade i början av detta stycke tror jag verkligen inte att Flash Video kommer att försvinna någon gång snart. Men med en multiskermmiljö, får du samma video att spela på, säger en Droid, iPhone, Samsung Galaxy Tablet och din HD-TV-apparat. Detta gör uppenbarligen webdesigners lite nervösa för att? väl? eftersom inbäddning av strömmande video i det förflutna har varit ganska tekniskt. Det är inte riktigt fallet längre! Som jag påpekade i det här avsnittet, om du kan kopiera och klistra in text på en webbsida, har Adobe ett par lösningar för dig.
Om du tycker att detta är intressant och verkligen vill gräva i OSMF eller Strobe, bör du börja med Joeseph Labreques serie som startade på aktiv. tutsplus, som han går in i mycket mer detaljer om de tekniska sakerna som omger streaming video debatten.
Accentsconagua