- Add videos to Adobe Muse
- Prepare a page for background video in Adobe Muse CC
- How to use full screen video background widget in Adobe Muse CC
- Add a video and test a page in Adobe Muse CC
- Add a poster frame in Adobe Muse CC
Add videos to Adobe Muse
While traditional web video is usually added using the HTML5 Video API, Adobe Muse does the same with so-called “widgets”. Widgets generate the HTML 5 needed for specific tasks, but use the clear language interface in Muse to write code when the page is published.
In this exercise we are going to use a widget that you can download for free from Muse Resources. When the widget is loaded, all you need to do is open the .zip file and double click on the .mulib file in the Full Screen Video folder. This will install it in your copy of Adobe Muse.
Prepare a page for background video in Adobe Muse CC
With the widget installed, you can create a page that will use the video.
Before you begin, create a folder for your Muse site. In this folder create another folder – we’ll use “ media ” – and move your mp4 and webm versions of the video to this folder.
When starting Muse ., select File > New Site † When the Layout dialog box opens, select desktop if initial layout and change the values page width and page height on the 1200 and 900 † Click Okay †
Double-click the master page in the map view to open the master page. When the main page opens, move the header and footer guides up and down the page. You don’t really need a header and footer for this example.
How to use full screen video background widget in Adobe Muse CC
Using the widget is very simple. The first thing you need to do is return to the map by selecting View > Schedule Mode † When the map view opens, double click Homepage to open it.
Open the library panel – if it is not open on the right side of the interface, select Window > Library – and open the folder [MR] Full screen background video † Drag the widget to the folder on the page.
you will notice parameters: will ask you to enter the names of the mp4 and webm versions of the video. Enter the names exactly as they appear in the folder you placed them in. Copy the title of the mp4 video and paste it in the areas to avoid mistakes MP4 and WEBM in parameters † menu †
Another trick: all this widget does is write the HTML 5 code for you. You can say it because you see it in the widget. In this case, you can put a widget from a web page on the pasteboard and it will still work. So it doesn’t interfere with the content you put on the page.
Add a video and test a page in Adobe Muse CC
Even though you added the code to play the videos, Muse still has no idea where those videos are. To fix this, select File > Add Files to Upload † When does it open? download dialog navigate to the folder containing your videos, select them and click Open † To check if they have been downloaded, open Asset panel and you will see two videos. Just leave them in the panel. They do not need to be placed on the page.
To test the project, select File > Preview page in browser or since it is one page, File > Preview site in browser † Your default browser opens and the video — tropical rain in my case — starts playing.
At this point, you can treat the Muse file as a regular web page and add content to the home page, then the video below will play.
Add a poster frame in Adobe Muse CC
This is the network we’re talking about here, and depending on your connection speed, there’s a good chance your user will open the page and stare at a blank screen while the video loads. This is not a good thing. Here’s how to deal with this annoyance.
The “best practice” is to include a poster frame in the video that will be displayed while the video is being uploaded. This is usually a full size screenshot of the video.
To add a poster list, click once fill browser top of the page. Click image link and navigate to the desired image. In the region of fit select Bowl to fill and press center in the region of Position † This ensures that the image is always scaled from the center of the image when resizing the browser viewport. You will also see an image on the page.
Another little trick is to at least have a solid fill color instead of white in case the poster frame takes a while to show up. To do this, click on Color Chip to open the Muse Color Picker. Select the eyedropper tool and click on the dominant color in the image. When you’re done, click the page to close the Browser Fill dialog box.
At this point you can save or publish the project.
The last part of this article series shows you how to write HTML5 code that inserts a video into the background of a web page.