Skip to main content

Media Player component

The Media Player component is used to embed audio or video content directly on a web page where it can be played.

See also:

Component(s) you might want to use with this one:

Design options

Width: Specify how wide the player will be in pixels; this option only applies to audio content.

Image: Specify an image as the thumbnail that will appear in the player to override the default image (which is otherwise the first frame of a video); this option only applies to video content.

Guidelines

  • Never upload audio files such as .mp3 files or video files such as .mp4 files directly to the DAM.
  • You may contact Studio to request that your audio or video file be uploaded to Concordia's pegasus server and then obtain a link to the content.
  • For best video compatibility you must provide Studio with an .mp4 file and for best audio compatibility you must provide an .mp3 file.

Accessibility

Making audio content accessible

Descriptive transcripts make audio content such as podcasts accessible to a wider audience

Transcripts should capture speech word-for-word and also include any other meaningful information that would add context such as describing sound effects or background noises for example.

The transcript can be included as part of a web page or as a downloadable text file.

Examples & use cases

Video

This is a video with no image added. The first frame of the video in this case is blank and it is also the default thumbnail image. The width of the Media Player component automatically fills the space that it's in.

This is the same video with an image added. The image displays in the Media Player component as the thumbnail. The ‘play’ button is automatically superimposed over the image. The player controls will appear once the video is clicked.

Settings

Screen capture of the settings in the Medium tab of AEM's Media Player component for an embedded video

Medium tab

  1. Medium type: select Video from the drop-down list
  2. Tracking title: enter a title for the video that will be referenced in a Google Analytics report
  3. Width: N/A, leave this field blank in the case of videos
  4. Files: enter the link to the video
Screen capture of the options settings in the Image tab of AEM's Media Player component for an embedded video

Image tab

Drag an image from the DAM in the left-hand side assets panel into the component.

Audio

This is a podcast recording with the player set to display at a width of 700 px.

Screen capture of the settings in the Medium tab of AEM's Media Player component for an embedded audio file

Settings

Medium tab

  1. Medium type: select Audio from the drop-down list
  2. Tracking title: enter a title for the podcast that will be referenced in a Google Analytics report
  3. Width: enter a number for the width in pixels
  4. Files: enter the link to the podcast

Image tab

The image tab has no effect when the medium is audio so it can be ignored.

Dos

  • Do contact Studio to host audio and video content.
  • Do review and edit captions or transcripts for accuracy.
  • Do include multiple audio recordings per page such as podcasts; this typically causes no performance or user experience issues.

Don'ts

  • Don't have multiple videos on the same page; this can slow down the loading time and impair the user experience.

Helpful tips & "gotchas"

  • Although the component settings allow you to click “Add item” and insert links to multiple media files, only the first one will play so the component should only be used for a single item at a time.
  • The Media Player works by buffering a video and then displaying the first frame as the default thumbnail. However, due to the time needed to buffer, the thumbnail may appear only after a delay; this may cause a poor user experience on slower internet connections — another reason why videos should ideally be limited to one per page.
screen capture of AEM's Media Player component with the error message "html5: Video file not found"
  • Sometimes after loading a page in authoring mode to update it, you may find an errror message where a video should be. The error says, “html5: Video file not found.” This is a known issue. Refresh the page and the video will reappear in the component.

Training

The Media Player component is covered in the Advanced training course.

Need support?

The Web team is here to help.

© Concordia University