Lägga till videon i Adobe Muse

2024 Författare: Abigail Brown | [email protected]. Senast ändrad: 2023-12-17 07:02

Vad att veta

• Med Hem-sidan i Plan, gå till Window >Library > [MR] Bakgrundsvideo i fullskärm mapp och dra widgeten till sidan.
• För att lägga till en video, gå till File > Lägg till filer för uppladdning > videomapp > Open.

Adobe Muse låter dig skapa webbsidor med ett liknande arbetsflöde som publikationer; du behöver inte ha en djup förståelse för koden som bygger en webbplats eller sida, även om förtrogenhet med HTML5, CSS och JavaScript inte skadar. Även om traditionell webbvideo vanligtvis läggs till via HTML5 Video API, åstadkommer Adobe Muse samma sak genom widgets som skapar HTML 5 som krävs för specifika uppgifter men använder ett vanligt gränssnitt 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 som kommer att använda videon.

1. Skapa en mapp för din Muse-webbplats innan du börjar. Inuti den mappen skapar du en annan mapp – vi använder “media” – och flyttar dina mp4- och webbm-versioner av videon till den mappen.
2. När du startar Muse, välj File > New Site.
3. När dialogrutan Layout öppnas, välj Desktop som Initial Layout och ändra Page Widthoch Page Height värden till 1200 och 900 . Klicka OK.

4. Dubbelklicka Master Page i planvyn för att öppna mastersidan. När huvudsidan öppnas flyttar du sidhuvuds- och sidfotsguiderna till toppen och botten av sidan. Du behöver verkligen ingen sidhuvud och sidfot för det här exemplet.

Hur man använder fullskärmsvideowidgeten för bakgrundsvideo i Adobe Muse CC

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 View > Plan Mode.
2. När planvyn öppnas, dubbelklicka på Hemsidan för att öppna den.
3. Öppna bibliotekspanelen – om den inte är öppen på höger sida av gränssnittet, välj Window > Library – och snurra ner [MR] Bakgrundsvideo i helskärmsläge.
4. Dra mappwidgeten till sidan.

5. Du kommer att märka att Options ber dig att ange namnen på mp4- och webm-versionerna av videorna. Ange namnen exakt som de är stavade 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 den i områdena MP4 och WEBM på Options-menyn

   Ett annat knep: Allt den här widgeten gör är att skriva HTML 5-koden åt dig. Du kan berätta detta eftersom du ser i widgeten. I det här fallet kan du placera widgeten från webbsidan på skrivbordet, och den kommer fortfarande att fungera. På så sätt stör det inte innehållet du kommer att placera på sidan.

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

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

1. För att åtgärda detta, välj File > Lägg till filer för uppladdning.
2. När dialogrutan Ladda upp öppnas, navigera till mappen som innehåller dina videor, välj dem och klicka på Öppna.

3. För att säkerställa att de har laddats upp, öppna Tillgångar-panelen,och du bör 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 File > Förhandsgranska sida i webbläsaren eller, eftersom detta är en enda sida, File > Förhandsgranska webbplats i webbläsare. Din standardwebbläsare öppnas och videon spelas upp.
5. Vid det här tillfället kan du behandla Muse-filen som en vanlig webbsida och lägga till innehåll på startsidan, så kommer videon att spelas upp under den.

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

Det här är webben vi pratar om här, och beroende på anslutningshastigheten finns det en god chans att din användare öppnar sidan och stirrar på en tom skärm medan videon laddas. Det här är inte bra. Så här hanterar du den här biten av elakhet.

Det är en "bästa praxis" att inkludera en affischram av videon, som 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å Browser Fill högst upp på sidan.
2. Klicka på bildlänken och navigera till bilden som ska användas.
3. I området Fitting, välj Scale to Fill och klicka på Centerpunkten i området Position. 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 knep är att ha en fast fyllningsfärg ifall affischramen skulle ta ett tag innan den dyker upp. För att göra detta, klicka på Color-chippet för att öppna Muse Color Picker. Välj verktyget pipett 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. Nu kan du spara projektet eller publicera det.

   Den sista delen av den här serien visar hur du skriver HTML5-koden som skjuter in en video i en webbsidas bakgrund.