Follow

Embedding MP3/MP4 files in a page

Modified on 23 Mar, 2015
Article Updated:

This article has been updated from the original to reflect browser support for HTML5 audio and video.

Whether using audio or video for teaching purposes, or within ePortfolios as examples of pupils’ understanding, embedding media within your Ultranet pages (as opposed to clicking a link and downloading a file) can help provide a more pleasant and fluid user experience.

The easiest way to publish and share media files in Ultranet is via the Media Gallery module (see further details in this article).

However, should you wish to embed a single MP3/MP4 file into the page area itself, then the following steps will show you how to achieve this. 

Note: All files uploaded into the Page Editor must be smaller than 100MB. If your source audio file is not in the MP3 format (e.g. WMA, M4A, WAV, etc.), then you will need to convert it using the appropriate available software; for example:

For video files, please refer to this article on compression/conversion to MP4.

 

  1. Navigate to the page you wish to embed the audio/video in, then activate the Page Editor.

  2. In the Page Editor, click on the File Manager icon and upload the MP3/MP4 to be embedded.

    FileManager.png

  3. Once uploaded, copy the file path shown in the Document Manager browser (e.g. "/DataStore/Pages/CLASS_5/Docs/Documents"), and also take note of the full MP3/MP4 file name (e.g. "sample.mp3").

    MediaPath.png

    Add these two elements together to get the full URL to your media file, which should look something like the following:

    /DataStore/Pages/CLASS_5/Docs/Documents/sample.mp3

  4. Next, back in the main Page Editor window, switch to HTML view using the toggle button to the bottom-left.

    HTMLView.png

  5. Paste in the required embed code by selecting one of the following: 

    <audio controls="controls"> <source src="/DataStore/Pages/CLASS_XXX/Docs/Documents/sample.mp3" type="audio/mpeg"></source> </audio>

    <video width="320" height="240" controls="controls"> <source src="/DataStore/Pages/CLASS_XXX/Docs/Documents/sample.mp4" type="video/mp4"></source> </video>

    Replace the placeholder text (highlighted in bold) with the full file path and file name copied in Step 3 above.

  6. Finally, switch back to Design view and ensure that the media player is loading where you want it. If not, you can highlight/select it and cut-and-paste it to a new location.

    MediaPlayer.png

    Once happy with the placement, click the "Update Page Content" button to save changes. Your file will now be playable within the embedded media player.

Note: The embed code can be used 2-3 times on the same page if you have more than one media file to play. If however you want to add several videos to a single page then there is a risk that this will exhaust the browser's ability to play them all. In this scenario the code needs to be altered to tell the server not to download the videos unless the user clicks on the play button, at which point only that specific video is downloaded. To ensure that the space occupied by the other videos is not blank, a placeholder image also needs to be uploaded. The revised code with placeholder text is as follows:                                           <video width="320" height="240" preload="none" controls="controls" poster="/DataStore/Pages/CLASS_XXX/Docs/Documents/screen_shot.png"> <source src="/DataStore/Pages/CLASS_XXX/Docs/Documents/sample.mp4" type="video/mp4"></source> </video>
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk