Embedding movie, audio, animation and other files

Xara Web Designer and Designer Pro include direct support for some types of file that you are likely to want to add to your website. For these files you can simply drag and drop them from Windows Explorer onto your page, or use "File" > "Import".

On import the file type is identified, an appropriate placeholder or link is added to your page, and the file is copied into the support folder for your design. The support folder is a folder which lives alongside your design file and is created automatically. If your design file is called „MySite.web", its support folder is „MySite_web_files". The contents of this folder are included along with all the image files for your site, whenever the site is exported and published.

MP4 & FLV movie files

These are the only movie files directly supported by Xara.

Import an MP4 or FLV file and Xara inspects the file to determine the aspect ratio and other information about the movie.

You are asked whether or not you want the movie to start playing automatically as soon as the page holding it is loaded (auto-play), although bear in mind that browser support for this option varies and may change due to explicit restrictions being added to the browsers to prevent auto-play. Firefox and Chrome no longer support auto-play.

The movie file is then inserted into the support folder of your website. A placeholder image resembling the movie player appears on your page.

Position and resize the placeholder using the Selector Tool, and then preview your page. Click on the movie player play button to start the movie. That's it! The movie player includes basic controls for adjusting volume, starting & stopping and for jumping to any point in the movie.

Alternatively you can use some of the widgets in the to present your movies instead. This way you have more control over the presentation. See "Components" > "Print and Web Components" > "Audio / Video".

See this Xara Knowledgebase article for up to date information on browser support for auto-play.

MP3 files

Import an MP3 file to add audio to your web page. A prompt allows you to choose whether the audio should start automatically when your page is loaded (some browsers may restrict this) or whether it should only start when the play button is pressed on the player.

As with the other file types above, a placeholder image showing the player is generated and placed on your page and the MP3 file and all other files needed to make the player work are copied to the support folder of your document and will be included in your exported website. Preview the page to see the player in action.

The player is simple and unobtrusive. You can start and stop the audio, click on the time line to jump to different parts of the audio, adjust the volume (click on the volume indicator line) and mute (click the speaker icon).

Technical note: The player uses the native HTML 5 capabilities of the web browser to play the audio, if the browser supports it and if it also supports the MP3 format. This means the player will work in all major browser versions (older browsers don't support HTML 5).

Animated GIFs

Import or drag and drop the GIF file onto your page. It gets copied to your design's support folder and a static placeholder image is generated for it. Resize and position the placeholder, then preview your page and you're done!

PDF Files

You can import PDF files into a web document in two different ways. Either import it so that the contents of the file are copied onto your page (as when importing a photo). Or you can link to a copy of the file in your website and have the file published with your site. When importing a PDF file a prompt is shown to let you choose between these two options.

When adding a link, the PDF file is copied into the support folder of your design, so it's exported and published with the rest of your site. And a link is added which looks like this on the page:

Clicking the link on your exported page normally opens the PDF file, but the exact behavior varies depending on the user's browser settings.

Word and other files

Use the Link tab of the Web Properties Dialog to add a link to a Word document or any other file. Select the Link to file button and then browse for the file.

When you publish your site, the document is published with it.

Clicking the link on your published page normally causes the browser to download the file.