Skip to main content
Apply Visit Give

Media Player

The Media Player component is used to embed audio content directly on a web page. You can also use it to embed videos hosted on Pegasus.

 

Uses

As this screenshot shows, the Media Player provides a streamlined way to embed audio on a page:

Screenshot of podcast page, with embedded audio player and link to podcast transcript just below it

It can also be used to embed videos hosted on the Pegasus server, like this one:

Note:

Best practices

Multiple audio or video files

  • It's technically possible to include multiple Media Player components on a page, but doing so may overwhelm your visitors.
  • If you have multiple audio or video files, speak with your Communications Advisor. They'll help you achieve your communication goals while providing a great visitor experience.

Audio

  1. Prepare the audio transcript. It should capture speech word for word and include any other meaningful information that would add context, e.g. describe sound effects or background music.
  2. Save the audio as an .mp3 file.
  3. Submit a Video/audio file upload request to Studio. Once the audio file's uploaded, Studio will send you a link to it.
  4. Add a Media Player component to an appropriate place on your page.
  5. Open the component for editing.
  6. In the Medium tab: 
    • Set Medium type to Audio.
    • Add a clear Tracking title for the audio, e.g. Loyola's Legacy narrated by Julian McKenzie, BA '16. This helps your page rank higher in Google searches.
    • Click Add item, then add the link from Studio.
  7. Click OK.
  8. Just below the Media Player component, provide the transcript in a WYSIWYG, in a WYSIWYG within an accordion panel, or as a downloadable text file.

Video

  1. Save the video as a .mp4 file.
  2. Submit a Video/audio file upload request to Studio. Once the video's uploaded, Studio will send you a link to it.
  3. Add a Media Player component to an appropriate place on your page.
  4. Open the component for editing.
  5. In the Medium tab: 
    • Set Medium type to Video.
    • Add a clear Tracking title for the video. This helps your page rank higher in Google searches.
    • Click Add item, then add the link Studio gave you.
  6. In the Image tab, add an appropriate image from the DAM. (If you don't, there will be a black rectangle, which doesn't look good!)

Video with an image added to the Media Player component

Video without an image added to the Media Player component

  1. Click OK. 
  2. Preview and refresh the page. The ‘play’ button and video controls are automatically superimposed over the image.

Accessibility

  • Provide a clear heading or introductory text before the podcast/video.
  • Include captions in videos.
  • Provide transcripts for podcasts.
  • Review and edit captions/transcripts to ensure accuracy.
Back to top

© Concordia University