Skip to content

Hur man lägger till bakgrundsvideo med Adobe Muse

12 de augusti de 2021
Image 01 56a459e75f9b58b7d0d6846f 03e6b537c8e040168caff90bb8777803

Vad man ska veta

  • Med Hem sida i Planen se, gå till Fönster > Bibliotek > [MR] Fullständig bakgrundsvideo mapp och dra widgeten till sidan.
  • För att lägga till en video, gå till Fil > Lägg till filer för uppladdning > videomapp> Öppen.

Med Adobe Muse kan du skapa webbsidor med liknande arbetsflöde som publikationer; du behöver ingen djup förståelse för koden som bygger en webbplats eller sida, även om bekantskap med HTML5, CSS och JavaScript inte skadar. Även om traditionell webbvideo vanligtvis läggs till via HTML5 Video API, åstadkommer Adobe Muse samma sak med widgets som skapar HTML 5 som krävs för specifika uppgifter men använder ett gränssnitt i vanligt språk i Muse för att skriva koden när sidan publiceras.

Hur man förbereder en sida för bakgrundsvideo i Adobe Muse CC

Med widgeten installerad kan du nu skapa sidan där videon ska användas.

  1. Innan du börjar, skapa en mapp för din Muse -webbplats. Skapa en annan mapp i den mappen – vi använder ”media” – och flytta dina mp4- och webm -versioner av videon till den mappen.

  2. När du startar Muse väljer du Fil > Ny webbplats.

  3. När dialogrutan Layout öppnas väljer du Skrivbord som den Initial layout och ändra Sidbredd och Sidhöjd värden till 1200 och 900. Klick OK.

  4. Dubbelklicka Huvudsida i planvyn för att öppna mastersidan. När huvudsidan öppnas flyttar du sidhuvud- och sidfotsguiderna till toppen och botten av sidan. Du behöver verkligen ingen sidhuvud och sidfot för detta exempel.

Hur man använder bakgrundsvideo -widgeten i helskärm i Adobe Muse CC

Muse skärmdump

Att använda widgeten är helt enkelt.

  1. Det första du behöver göra är att återgå till planvyn genom att välja Se > Planläge.

  2. När planvyn öppnas dubbelklickar du på Hemsida att öppna den.

  3. Öppna panelen Bibliotek – om den inte är öppen på höger sida av gränssnittet, välj Fönster > Bibliotek – och snurra nerför [MR] Fullständig bakgrundsvideo mapp.

  4. Dra mappwidgeten till sidan.

  5. Du kommer att märka alternativ be dig att ange namnen på mp4- och webm -versionerna av videorna. Ange namnen precis som de stavas i mappen där du placerade dem. Ett litet knep för att säkerställa att du inte gör ett misstag är att kopiera namnet på mp4 -videon och klistra in det i MP4 och WEBM områden i Alternativ -menyn.

    Ett annat knep: Allt denna widget gör är att skriva HTML 5 -koden åt dig. Du kan berätta detta för att du ser <> i widgeten. I det här fallet kan du placera widgeten från webbsidan på tavlan, så fungerar det fortfarande. På så sätt stör det inte något innehåll du kommer att placera på sidan.

Hur man lägger till video och testar en sida i Adobe Muse CC

Muse skärmdump

Även om du har lagt till koden som ska spela upp videorna, vet Muse fortfarande inte var de finns.

  1. För att åtgärda detta, välj Fil > Lägg till filer för uppladdning.

  2. När Ladda upp dialogruta öppnas, navigerar du till mappen som innehåller dina videor, markerar dem och klickar på Öppen.

  3. För att säkerställa att de har laddats upp, öppna Tillgångspanel, och du borde se dina två videor. Lämna dem bara i panelen. De behöver inte placeras på sidan.

  4. För att testa projektet, välj Fil > Förhandsgranska sidan i webbläsaren eller, eftersom det här är en enda sida, Fil > Förhandsgranska webbplatsen i webbläsaren. Din standardwebbläsare öppnas och videon spelas upp.

  5. Vid denna tidpunkt kan du behandla Muse -filen som en vanlig webbsida och lägga till innehåll på hemsidan, och videon spelas upp under den.

Hur man lägger till en videoposterram i Adobe Muse CC

Muse skärmdump

Det här är webben vi pratar om här, och beroende på anslutningshastigheten finns det en god chans att din användare kan öppna sidan och stirra på en tom skärm medan videon laddas. Det här är inte bra. Så här hanterar du den här otrevligheten. Det är en ”bästa praxis” att inkludera en affischram för videon, som kommer att visas medan videon laddas. Detta är vanligtvis en skärmdump i full storlek av en bildruta från videon.

  1. För att lägga till affischramen, klicka en gång på Webbläsarfyllning överst på sidan.

  2. Klicka på Bildlänk och navigera till bilden som ska användas.

  3. I Passande område, välj Skala för att fylla och klicka på Mittpunkt i Placera område. Detta säkerställer att bilden alltid skalas från mitten av bilden när webbläsarens visningsportstorlek ändras. Du kommer också att se bilden fylla sidan.

  4. Ett annat litet trick är att ha en fast fyllningsfärg om affischramen tar ett tag att visas. För att göra detta, klicka på Färg chip för att öppna Muse Color Picker. Välj ögon droppar verktyg och klicka på en dominerande färg i bilden. När du är klar klickar du på sidan för att stänga dialogrutan Webbläsarfyllning.

  5. Vid det här laget kan du spara projektet eller publicera det. Den sista delen av den här serien visar hur du skriver HTML5 -koden som för en video in i en webbsides bakgrund.