Share
Idag lär jag dig hur du visar video på webben med en öppen källspelare. Vi kommer att täcka alla steg, inklusive att konvertera en video till flv-filformatet och inbädda en anpassad spelare med hjälp av SWFObject. Det bästa är att detaljhandeln Adobe Flash inte krävs.
Det första steget att bädda in en video kodar för en video i .flv-format. Nästan alla online-webspelare använder .flv som standard för att spela filer.
För den här handledningen kan du ladda ner den provvideo som jag har använt kallad Trusted Computing på archive.org (Regisserad av: Benjamin Stephan och Lutz Vogel.)
Om du inte har Macromedia Flash, hoppa sedan till 1b.
Öppna Macromedia Flash Video Encoder och lägg till videon i kön Fil> Lägg till. Klicka sedan på Start kö i Fil> Startkö och du är färdig med att koda filen till .flv-format.
Obs! Anpassningen på detta steg är minimal. För mer kontroll över videostorlek och komprimering hoppa till steg 1b eller 1c.
Det finns många alternativ när du kodar för FLV. Windows-alternativet för denna handledning är Riva FLV Encoder eftersom det är gratis och anpassningsbart.
Ladda ner och installera Riva FLV Encoder från Riva hemsida.
När du väl öppnat lägger du till videon i ingångslådan med hjälp av bläddringsknappen. Programmet utmatar automatiskt videon i samma katalog.
Därefter justerar vi inställningarna i den högra delen. För den här enkla videon kommer vi att använda videostorleken på 320x240 och behålla alla andra inställningar som standard. För att starta kodningen klickar du på FLV Encode längst ner i programmet.
Obs! Försök och behåll filstorleken lägre genom att justera inställningarna och hålla upplösningen nere. Ju större video, desto längre tid tar det att ladda.
Valet för Mac i denna handledning är ffmpegX.
Hämta och installera ffmpegX-kodaren från deras hemsida.
När du väl öppnat lägger du till videon i ingångslådan med hjälp av knappen Öppna. Programmet sparar utmatningen videon i samma katalog, men du måste uppdatera filnamnet till TrustedComputing_LAFKON_LOW.flv.
Nästa ändra målformatet till FLV och klicka på kod. För att göra några ändringar i videostorlek och komprimering, klicka på de olika flikarna.
Obs! Försök och behåll filstorleken lägre genom att justera inställningarna och hålla upplösningen nere. Ju större video, desto längre tid tar det att ladda.
I den här handledningen använder vi MPW Player med öppen källkod för att spela våra flashfiler.
De främsta anledningarna är att MPW-spelaren är öppen källkod och erbjuder både enkel anpassning och djupare anpassning.
För att ladda ner spelaren, besök MPW Player-webbplatsen. Webbplatsen är spansk men bara klicka på den blå nedladdningsknappen.
De nödvändiga filerna är mpw_player.swf och innehåller mappen. Obs! Placera den kodade flv-filen, TrustedComputing_LAFKON_LOW.flv, i samma mapp som spelaren och html-filen.
Skapa ett tomt HTML-dokument och lägg till skript taggar för swfobject i huvudet på dokumentet. Filen swfobject.js finns i mappen i nedladdningen från mpw-spelaren.
Därefter lägger vi in den faktiska flashspelaren och redigerar en rad. Placera namnet på videofilen, TrustedComputing_LAFKON_LOW.flv, under variabelflv.
Denna div ersätts av javascript med swfobject
Nu har vi en fungerande spelare med standardutseendet.
Att anpassa spelaren är mycket viktigt och det är anledningen till att vi använder MPW Player. För att göra uppdateringar till spelaren behöver vi bara lägga till variabler i JavaScript.
Den första anpassningen till spelaren kommer att lägga till ett förhandsgranskningsfoto för videon. För att lägga till ett foto, lägg till variabeln jpg och sedan platsen för fotot. Fotoet som används i handledningen heter bilder_27_6 / hur-att-spela-video-användande-en-öppen-källspelaren_10.jpg - en skärmdump från videon. Obs! Glöm inte skriptkoderna i huvudet på dokumentet.
Denna div ersätts av javascript med swfobject
För att göra ytterligare ändringar, lägg till fler variabler. Här är ett urval av alla standardvariabler som läggs till med kommentarer som förklarar varje syfte.
Denna div ersätts av javascript med swfobject
Inbäddning av spelaren med SWFObject tillåter oss att använda en platshållare bild eller text om användaren inte har flash eller javascript. En stor anledning till detta är många datorer eller enheter som iPhone har inte Flash eller JavaScript aktiverat.
I det här exemplet använder vi en enkel bild, men vilken kod som helst kommer att fungera. SWFObject ersätter allt innehåll inuti en refererad div. När en användare saknar JavaScript eller Flash, visar webbläsaren bara div-innehållet. I det här fallet är innehållet som visas bara samma jpg-fil, images_27_6 / how-to-play-video-using-a-open-source-player_10.jpg, som vi använde för förhandsgranskning.
För att placera mer än en spelare på en enda sida, se till att varje refererad div har ett unikt namn. Uppdatera sedan JavaScript-referensen för att matcha div-id.
MPW-spelaren kan även användas som en ljudspelare. Allt vi behöver göra är att lägga till variabel mp3 istället för flv.
MPW Player är öppen källkod, vilket innebär att vem som helst kan ladda ner och göra ändringar till spelaren. För att ladda ner källkoden för spelaren besök denna webbsida och ladda ner "MPW Player SRC".
MPW Player är inte perfekt för varje webvideo. Testa dessa andra fria spelare eftersom de kanske fungerar bättre för dig.
Denna handledning visade dig hur man kodar en video i flv och anpassar en öppen källspelare för att visa video och ljud på webben.
Accentsconagua