Lägga till videor i Dreamweaver

Senast uppdaterad den 25 sep. 2023

Lär dig hur du bäddar in videor på webbsidor och infogar FLV-filer i Dreamweaver.

Bädda in videoklipp i webbsidor (HTML5)

HTML5 har stöd för video- och ljudtaggar, som gör det möjligt att spela upp video- och ljudfiler i webbläsaren utan att använda externa plugin-program eller spelare. Dreamweaver har stöd för kodtips för att lägga till video- och ljudtaggar.

I Live-vyn återges inbäddade videoklipp i form av förhandsvisningsklipp.

Obs!

Du kan bädda in alla sorters videoklipp i en webbsida, men alla videoklipp återges inte i Live-vyn. Dreamweavers stöd för ljud- och videotaggar baseras på Apples QuickTime-plugin. I Windows återges medieinnehållet på webbsidan bara om Apples QuickTime-plugin är installerad.

Mer information om hur du infogar HTML5-videor finns i Infoga HTML5-videor i Dreamweaver.

Infoga FLV-filer

Infoga FLV-filer

Du kan enkelt lägga till FLV-video på dina webbsidor utan att använda Flash-utvecklingsverktyget.Du måste ha en kodad FLV-fil innan du börjar.

Dreamweaver infogar en SWF-komponent som visar FLV-filen. När den visas i en webbläsare visar denna komponent den valda FLV-filen samt en uppsättning uppspelningskontroller.

Den valda FLV-filen och en uppsättning uppspelningskontroller

Dreamweaver ger dig följande alternativ för att leverera FLV-video till dina webbplatsbesökare:

Progressivt nedladdad video

Hämtar FLV-filen till webbplatsbesökarens hårddisk och spelar sedan upp den. Till skillnad från traditionella "hämta och spela upp" metoder för video leverans, tillåter progressiv hämtning videofilen att börja spelas upp innan hämtningen är klar.

Direktuppspelad video

Innebär att videon strömmas och spelas upp på webbsidan efter en kort buffringsperiod som gör att filmen går att spela upp utan att den hackar. Om du vill spela upp video direkt på dina webbsidor måste du ha tillgång till Adobe® Flash® Media Server.

Du måste ha en kodad FLV-fil innan du kan börja använda den i Dreamweaver. Du kan infoga videofiler som har skapats med två olika slags codecar (komprimerings-/dekomprimeringstekniker): Sorenson Squeeze och On2.

När du infogar en FLV-fil infogas koden (liksom vid vanliga SWF-filer) som identifierar om användarna har rätt version av Flash Player för att kunna visa videofilmen. Om användaren inte har rätt version visar sidan alternativt innehåll som uppmanar användaren att hämta den senaste versionen av Flash Player.

Obs!

För att kunna visa FLV-filer måste användarna ha Flash Player 8 eller senare installerat på datorerna. Om en användare inte har rätt version av Flash Player installerat, men har Flash Player 6.0 r65 eller senare, visar webbläsaren ett expressinstallationsprogram för Flash Player i stället för det alternativa innehållet. Om användaren tackar nej till expressinstallationen visar sidan det alternativa innehållet.

Mer information om att arbeta med video finns i Video Technology Center på www.adobe.com/go/flv_devcenter_se.

Infoga en FLV-fil

Välj Infoga > HTML > Flash-video.

Infoga Flash-video
Infoga Flash-video

I dialogrutan Infoga FLV väljer du Progressiv hämtning eller Streaming Video från popup-menyn Videotyp.
Fyll i resten av alternativen i dialogrutan och klicka på OK.
Obs!

Microsoft Internet Information Server (IIS) bearbetar inte kapslade objekttaggar. För ASP-sidor använder Dreamweaver kapslad objekt/embed kod istället för kapslad objektkod när SWF eller FLV-filer infogas.

Ange alternativ för progressiv hämtning av video

Dialogrutan Infoga FLV låter dig ställa in alternativ för progressiv hämtning leverans av en FLV-fil infogad i en webbsida.

Välj Infoga > HTML > Flash-video (eller klicka på ikonen Flash-video i kategorin HTML på panelen Infoga).

I dialogrutan Infoga FLV väljer du Progressiv hämtning av video från menyn Videotyp.
Infoga Flash-video
Infoga Flash-video

Ange följande alternativ:

URL

Anger en relativ eller absolut sökväg till FLV-filen. För att ange en relativ sökväg (till exempel mypath/myvideo.flv), klicka på knappen Bläddra, navigera till FLV-filen och välj den.För att ange en absolut sökväg skriver du URL:en (till exempel http://www.example.com/myvideo.flv) för FLV-filen.

Skal

Bestämmer videokomponentens utseende. En förhandsgranskning av det valda skalet visas under popup-menyn Skal.

Bredd

FLV-filens bredd i pixlar. Dreamweaver bestämmer FLV-filens bredd och bredden visas automatiskt i det här fältet.

Höjd

FLV-filens höjd i pixlar. Dreamweaver optimerar FLV-filens höjd automatiskt och höjden visas automatiskt i det här fältet.

Obs!

Totalt med skal är FLV-filens bredd och höjd plus det valda skalets bredd och höjd.

Begränsa

Behåller samma bildförhållande mellan bredden och höjden på videokomponenten. Det här alternativet är normalt markerat.

Autospela

Anger om video ska spelas upp när webbsidan öppnas.

Automatisk återspolning

Anger om uppspelningskontrollen återgår till startposition efter att video har spelats klart.

Klicka OK för att stänga dialogrutan och lägga till FLV-filen ill din webbsida.

Kommandot Infoga FLV genererar en videospelare SWF-fil och en skal SWF-fil som används för att visa ditt videoinnehåll på en webbsida. (Om du vill se de nya filerna kan du behöva klicka på knappen Uppdatera i panelen Filer.)Dessa filer lagras i samma katalog som HTML-filen där du lägger till videoinnehåll.När du laddar upp HTML-sidan som innehåller FLV-filen laddar Dreamweaver upp dessa filer som beroende filer (så länge du klickar Ja i dialogrutan Put Dependent Files).

Ange alternativ för direktuppspelad video

Dialogrutan Infoga FLV låter dig ställa in alternativ för streaming video hämtning av en FLV-fil infogad i en webbsida.

Välj Infoga > HTML > Flash-video (eller klicka på ikonen Flash-video i kategorin HTML på panelen Infoga).

Välj Direktuppspelad video på snabbmenyn Videotyp.
Ange alternativ för direktuppspelad video
Ange alternativ för direktuppspelad video

Server-URI

Anger server namnet, applikation namnet och instans namnet i formen rtmp://www.example.com/app_name/instance_name.

Namn på den direktuppspelade videon

Anger namnet på FLV-filen som du vill spela upp (till exempel myvideo.flv). Tillägget .flv behöver inte anges.

Skal

Bestämmer videokomponentens utseende. En förhandsgranskning av det valda skalet visas under popup-menyn Skal.

Bredd

FLV-filens bredd i pixlar. Dreamweaver bestämmer FLV-filens bredd och fyller automatiskt i bredden i det här fältet.

Höjd

FLV-filens höjd i pixlar. Dreamweaver bestämmer FLV-filens höjd och fyller automatiskt i höjden i pixlar i det här fältet.

Obs!

Totalt med skal är FLV-filens bredd och höjd plus det valda skalets bredd och höjd.

Begränsa

Gör att videokomponentens höjd-/breddförhållande bibehålls. Det här alternativet är normalt markerat.

Livesänd video

Anger om videomaterialet spelas upp live. Om du väljer Livesänd video spelar Flash Player upp en livesänd video som strömmas från Flash® Media Server. Den livesända videons namn är det som du har angett i textrutan Namn på den direktuppspelande videon.

Obs!

Om du vill aktivera Livesänd video måste du välja ett av alternativet för haloskal i skalfältet. Om du väljer Livesänd video visas enbart volymkontrollen på komponentens skal, eftersom det inte går att manipulera direktsända filmer. Dessutom fungerar inte alternativen Spela automatiskt eller Automatisk återspolning.

Autospela

Anger om video ska spelas upp när webbsidan öppnas.

Automatisk återspolning

Anger om uppspelningskontrollen ska återgå till startposition när video är färdigspelad.

Buffringstid

Anger tiden, i sekunder, som krävs för buffring innan video börjar spelas upp. Standardbuffertiden är inställd på 0 så att video börjar spelas omedelbart efter att Spela-knappen klickas. (Om Autospela är valt börjar videon spelas så snart en anslutning upprättats med servern.)Du kanske vill ställa in en buffertid om du levererar video som har en högre bithastighet än webbplatsbesökarens anslutningshastighet, eller när Internettrafik kan orsaka bandbredds- eller anslutningsproblem. Till exempel, om du vill skicka 15 sekunder av video till webbsidan innan webbsidan börjar spela upp video, ställ in buffertiden till 15.

Klicka på OK för att stänga dialogrutan och lägga till FLV-filen till din webbsida.

Kommandot Infoga FLV genererar en SWF-fil för videospelare och en SWF-fil för skal som används för att visa din video på en webbsida.Kommandot genererar också en main.asc-fil som du måste ladda upp till din Flash Media Server. (För att se de nya filerna kanske du behöver klicka på uppdateringsknappen i panelen Filer.)Dessa filer lagras i samma katalog som HTML-filen till vilken du lägger till videoinnehåll. När du laddar upp HTML-sidan som innehåller FLV-filen, glöm inte att ladda upp SWF-filerna till din webbserver och main.asc-filen till din Flash Media Server.

Obs!

Om du redan har en main.asc-fil på din server, kontrollera med din serveradministratör innan du laddar upp main.asc-filen som genererats av kommandot Infoga FLV.

Du kan enkelt ladda upp alla nödvändiga mediafiler genom att välja videokomponentens platshållare i Dreamweaver-dokumentfönstret och klicka på knappen Ladda upp media i egenskapsinspektören (Fönster > Egenskaper).För att se en lista över nödvändiga filer, klicka på Visa nödvändiga filer.

Obs!

Knappen Ladda upp media laddar inte upp HTML-filen som innehåller videoinnehåll.

Redigera hämtningsinformation för Flash Player

När du infogar en FLV-fil på en sida, infogas kod som identifierar om användaren har rätt version av Flash Player. Om så inte är fallet, visar sidan ett standardiserat alternativt innehåll som uppmanar användaren att hämta den senaste versionen. Du kan ändra det här alternativa innehållet när som helst.

Den här proceduren gäller också för SWF-filer.

Obs!

Om en användare inte har rätt version men har Flash Player 6.0 r65 eller senare, visar webbläsaren ett expressinstallationsprogram för Flash Player. Om användaren tackar nej till expressinstallationen visar sidan det alternativa innehållet.

I Design-vyn i dokumentfönstret väljer du SWF-filen eller FLV-filen.

Klicka på ögonikonen i SWF-filen eller FLV-filen.

Obs!

Du kan också trycka på Ctrl + ] för att växla till alternativ innehållsvy.För att återgå till SWF/FLV-vyn trycker du på Ctrl + [ tills allt alternativt innehåll är valt.Tryck sedan Ctrl + [ igen.

Redigera innehållet precis som du skulle redigera vilket annat innehåll som helst i Dreamweaver.
Obs!

Du kan inte lägga till SWF-filer eller FLV-filer som alternativt innehåll.

Klicka på ögonikonen igen för att återgå till SWF- eller FLV-filvyn.

Felsöka FLV-filer

Det här avsnittet beskriver några av de vanligaste orsakerna till problem med FLV-filer.

Visningsproblem som orsakas av avsaknad av relaterade filer

Koden som genereras av Dreamweaver CS4 och senare förlitar sig på fyra beroende filer, som skiljer sig från själva FLV-filen:

  • swfobject_modified.js

  • expressInstall.swf

  • FLVPlayer_Progressive.swf

  • Skalfilen (till exempel Clear_Skin_1.swf)

Observera att det finns två fler beroende filer för Dreamweaver CS4 och senare, jämfört med Dreamweaver CS3.

De första två av dessa filer (swfobject_modified.js och expressInstall.swf) installeras i en mapp som kallas Scripts, som Dreamweaver skapar i roten av din webbplats om den inte redan finns.

De andra två filerna (FLVPlayer_Progressive.swf och skin-filen) installeras i samma mapp som sidan där FLV:n är inbäddad.Skin-filen innehåller kontrollerna för FLV:n, och dess namn beror på det skin som valts i alternativen som beskrivs i Dreamweaver Help.Om du till exempel väljer Clear Skin heter filen Clear_Skin_1.swf.

Alla fyra beroende filer MÅSTE laddas upp till din fjärrserver för att FLV:n ska visas korrekt.

Att glömma ladda upp dessa filer är den vanligaste orsaken till att FLV-filer inte fungerar korrekt på en webbsida.Om en av filerna saknas kan du se en "vit ruta" på sidan.

För att säkerställa att du har laddat upp alla beroende filer använder du Dreamweaver Files-panelen för att ladda upp sidan där FLV:n visas.När du laddar upp sidan frågar Dreamweaver om du vill ladda upp beroendefiler (om du inte har stängt av det här alternativet).Klicka på Ja för att skicka de beroende filerna.

Visningsproblem vid förhandsgranskning av sidor lokalt

På grund av säkerhetsuppdateringar i Dreamweaver CS4 kan du inte använda kommandot Förhandsgranskning i webbläsaren för att testa en sida med en inbäddad FLV om du inte definierar en lokal testserver i din Dreamweaver-platsdefinition och använder testservern för att förhandsgranska sidan.

Normalt behöver du bara en testserver om du utvecklar sidor med ASP, ColdFusion eller PHP (se Konfigurera din dator för applikationsutveckling).Om du bygger webbsidor som bara använder HTML och inte har definierat en testserver ger tryckning på F12 (Windows) Opt+F12 (Macintosh) en röra av skin-kontroller på skärmen.Lösningen är antingen att definiera testservern och använda testservern för att förhandsgranska din sida, eller ladda upp dina filer till en fjärrserver och visa dem där.

Obs!

Det är möjligt att säkerhetsinställningar också kan vara ansvariga för oförmåga att förhandsgranska lokalt FLV-innehåll, men Adobe har inte kunnat bekräfta detta.Du kan prova om det hjälper att ändra säkerhetsinställningarna. Mer information om hur du ändrar säkerhetsinställningarna finns i Tech Note 117502.

Andra möjliga orsaker till problem med FLV-filer

  • Om du inte kan förhandsvisa lokalt bör du kontrollera att alternativet Förhandsgranska med temporär fil är avmarkerat i Redigera > Inställningar > Förhandsvisning i realtid.

  • Kontrollera att det senaste plugin-tillägget för FlashPlayer används.

  • Var försiktig med att flytta filer och mappar utanför Dreamweaver. Om du flyttar filer och mappar utanför Dreamweaver, kanske sökvägarna till FLV-relaterade filer inte stämmer.

  • En FLV-fil som ger upphov till problem kan du tillfälligt ersätta med en fungerande FLV-fil. Om ersättningsfilen fungerar beror problemet på den ursprungliga FLV-filen, inte på webbläsaren eller datorn.

Redigera eller ta bort en FLV-komponent

Ändra inställningarna för video på webbsidan genom att välja platshållaren för videokomponenten i dokumentfönstret i Dreamweaver och använda egenskapskontrollen. Ett annat sätt är att ta bort videokomponenten och infoga den igen genom att välja Infoga > HTML > Flash-video.

Redigera FLV-komponenten

Välj platshållaren för videokomponenten i Dreamweaver-dokumentfönstret genom att klicka på FLV-ikonen i mitten av platshållaren.
Öppna egenskapsinspektorn (Fönster > Egenskaper) och gör dina ändringar.
Obs!

Du kan inte ändra videotyper (från progressiv hämtning till strömning, till exempel) genom att använda egenskapsinspektören.För att ändra videotyp tar du bort FLV-komponenten och sätter in den igen genom att välja Infoga > Media > FLV.

Ta bort FLV-komponenten

Välj platshållaren för FLV-komponenten i Dreamweaver-dokumentfönstret och tryck på Ta bort.

Lägg till video (andra format)

Mer information om hur du lägger till videor som inte är FLV-filer finns i Lägg till video (inte FLV)

Du kanske också vill veta hur du infogar material till plugin-program i Dreamweaver för att spela upp mp3-filer eller QuickTime-videor på Dreamweaver-platsen.