Adding videos and audio to your Mosaic site

We recommend hosting videos and audio externally on third-party streaming services, such as YouTube, Vimeo or the University's Podcasts service, and then embedding them in your Mosaic site using the insert Image or File icon in the WYSIWYG widget. Other options for embedding videos are detailed on the embedding third-party content documentation.

Why host externally?

Video and audio files take up significant amounts of disk space, and as such will count towards the storage space which determines your Mosaic pricing band.

Hosting your videos and audio on a dedicated media-hosting service also allows you to incorporate the social aspects (commenting, favouriting, playlists, sharing) without these having to be replicated on Mosaic, and gives you an extra channel for engagement.

Using insert Image or File 

The widgets which contain the text editor are the ‘Authoring’ content widgets:

• WYSIWYG content area
• Accordion content
• Tabbed content

For instructions on how to use the Image or File icon and Upload from Web tab, see the documentation for the WYSIWYG text editor, under inserting images and files. 

Inline player for externally hosted audio

To add a simple inline audio player like the above for an externally hosted audio file, you can go into the 'Source' view for a WYSIWYG and add an <audio> tag pointing to the location of the audio file, i.e.

<audio controls="">
    <source src="https://oxfordmosaic.web.ox.ac.uk/file_address" type="audio/mpeg" /> 
    Your browser does not support the audio element.
</audio>

The 'file_address' must be replaced with the full address of the .mp3 file. It can be tricky to find this; you may need to look at the source of the page which links to it.

On podcasts.ox.ac.uk one way to find the address of the audio file is to click on the 'Audio RSS Feed' link, and look for the contents of the "url" attribute on the <enclosure> tag in the resulting XML page, e.g. 

<enclosure url="http://media.podcasts.ox.ac.uk/path/to/podcast/file.mp3" length="36523882" type="audio/mpeg" />

Notes:

• if the audio file is not an mp3 you will need to change the value of the 'type' attribute accordingly. Supported formats are audio/mpeg, audio/ogg and audio/wav.
• the message 'Your browser does not support the audio element' is a fallback which will only display in the unlikely event that the viewer's browser does not support this element. All modern web browsers support the <audio> element.