Wat te weten
- Ga met de Home pagina in de Plan weergave naar Window >Bibliotheek > [MR] Achtergrondvideo op volledig scherm map en sleep de widget naar de pagina.
- Om een video toe te voegen, ga naar File > Add Files For Upload > videos folder > Open.
Adobe Muse stelt je in staat webpagina's te maken met een workflow die vergelijkbaar is met die van publicaties; je hebt geen diepgaand begrip nodig van de code die een site of pagina bouwt, hoewel bekendheid met HTML5, CSS en JavaScript geen kwaad kan. Hoewel traditionele webvideo meestal wordt toegevoegd via HTML5 Video API, bereikt Adobe Muse hetzelfde door middel van widgets die de HTML 5 creëren die nodig is voor specifieke taken, maar die een duidelijke taalinterface in Muse gebruiken om de code te schrijven wanneer de pagina wordt gepubliceerd.
Een pagina voorbereiden voor achtergrondvideo in Adobe Muse CC
Met de widget geïnstalleerd, kun je nu de pagina maken die de video zal gebruiken.
- Maak voordat u begint een map voor uw Muse-site. Maak in die map een andere map - we gebruiken " media " - en verplaats je mp4- en webm-versies van de video naar die map.
- Wanneer u Muse start, selecteert u Bestand > Nieuwe site.
- Wanneer het dialoogvenster Lay-out wordt geopend, selecteert u Desktop als de Initial Layout en wijzigt u de Page Widthen Page Height waarden naar 1200 en 900 . Klik op OK.
-
Dubbelklik Stampagina in de planweergave om de basispagina te openen. Wanneer de basispagina wordt geopend, verplaatst u de hulplijnen voor koptekst en voettekst naar de boven- en onderkant van de pagina. Voor dit voorbeeld heb je echt geen kop- en voettekst nodig.
Hoe de achtergrondvideo-widget op volledig scherm te gebruiken in Adobe Muse CC
Het gebruik van de widget is doodeenvoudig.
- Het eerste dat u moet doen, is terugkeren naar de plattegrondweergave door View > Plan Mode. te selecteren
- Wanneer de Plan View wordt geopend, dubbelklikt u op de Home page om deze te openen.
- Open het bibliotheekpaneel – als het niet open is aan de rechterkant van de interface, selecteer Window > Bibliotheek – en draai de [MR] Fullscreen Background Video map.
- Sleep de mapwidget naar de pagina.
-
Je zult merken dat de Options je vragen om de namen van de mp4- en webm-versies van de video's in te voeren. Voer de namen precies in zoals ze zijn gespeld in de map waarin u ze hebt geplaatst. Een kleine truc om ervoor te zorgen dat je geen fouten maakt, is door de naam van de mp4-video te kopiëren en in de gebieden MP4 en WEBM te plakken van het Optiemenu
Een andere truc: het enige dat deze widget doet, is de HTML 5-code voor je schrijven. Je kunt dit zien omdat je het in de widget ziet. In dit geval kunt u de widget van de webpagina op het plakbord plaatsen en het zal nog steeds werken. Op deze manier interfereert het niet met de inhoud die u op de pagina plaatst.
Video toevoegen en een pagina testen in Adobe Muse CC
Hoewel je de code hebt toegevoegd waarmee de video's worden afgespeeld, weet Muse nog steeds niet waar die video's zich bevinden.
- Om dit op te lossen, selecteer File > Add Files For Upload.
- Wanneer het Upload-dialoogvenster wordt geopend, navigeert u naar de map met uw video's, selecteert u ze en klikt u op Open.
-
Om er zeker van te zijn dat ze zijn geüpload, open je het Assets-paneel,en je zou je twee video's moeten zien. Laat ze gewoon in het paneel. Ze hoeven niet op de pagina te worden geplaatst.
- Om het project te testen, selecteer File > Preview Page in Browser of, omdat dit een enkele pagina is, Bestand > Voorbeeld van site in browser. Je standaardbrowser wordt geopend en de video wordt afgespeeld.
- Op dit punt kun je het Muse-bestand behandelen als een gewone webpagina en inhoud toevoegen aan de startpagina, waarna de video eronder wordt afgespeeld.
Een videoposterframe toevoegen in Adobe Muse CC
Dit is het web waar we het hier over hebben en, afhankelijk van de verbindingssnelheid, is de kans groot dat uw gebruiker de pagina opent en naar een leeg scherm staart terwijl de video wordt geladen. Dit is geen goede zaak. Hier is hoe om te gaan met dit beetje smerigheid.
Het is een "Best Practice" om een posterframe van de video op te nemen, dat zal verschijnen terwijl de video wordt geladen. Dit is meestal een schermafbeelding op volledige grootte van een frame uit de video.
- Om de posterlijst toe te voegen, klik eenmaal op Browser Fill bovenaan de pagina.
- Klik op de Image link en navigeer naar de te gebruiken afbeelding.
- In het gebied Fitting selecteert u Scale to Fill en klikt u op het Center point in het Positie gebied. Dit zorgt ervoor dat de afbeelding altijd vanuit het midden van de afbeelding wordt geschaald wanneer de viewport-grootte van de browser verandert. Je zult ook zien dat de afbeelding de pagina vult.
- Een andere kleine truc is om een effen vulkleur te hebben voor het geval het even duurt voordat de posterlijst verschijnt. Om dit te doen, klikt u op de Color-chip om de Muse Color Picker te openen. Selecteer het gereedschap eyedropper en klik op een overheersende kleur in de afbeelding. Als u klaar bent, klikt u op de pagina om het dialoogvenster Browser Fill te sluiten.
-
Op dit punt kunt u het project opslaan of publiceren.
Het laatste deel van deze serie laat zien hoe je de HTML5-code schrijft die een video naar de achtergrond van een webpagina schuift.
