Audio/Video Players

Skill Level: 
Intermediate

We suggest that you make use of the media hosting service MediaHub, which provides embed codes that integrate some very useful accessibly features such as searchable captions. Media hosted outside of MediaHub can still use the same player as follows.

To embed a video on your page so that it will work across browsers, use the mediaelement_wdn plugin. To use this plugin, you will need to do the following:

  1. Embed the video on your page with either the <audio> or the <video> element.
  2. Give the <audio> or the <video> element a class of wdn_player.
    1. learn more about the audio element
    2. learn more about the video element
  3. Load the mediaelement_wdn plugin with <script>WDN.initializePlugin('mediaelement_wdn');</script>. Please note: You only need to run this script once per page. Putting it at the bottom of your content ensure that all players get loaded when ready.

Examples

Audio

<audio class="wdn_player" preload="auto" src="https://mediahub.unl.edu/uploads/e69c5690123db31675e38132303fd3ff.mp3"></audio>
<script>WDN.initializePlugin('mediaelement_wdn');</script>

View a more detailed example of the audio player

Video

<video class="wdn_player" src="https://mediahub.unl.edu/uploads/37bf38ddb70d3a2c460c166b5120269e.mp4" controls="controls" poster="https://mediahub.unl.edu/uploads/thumbnails/2700/original.jpg"></video>
<script>WDN.initializePlugin('mediaelement_wdn');</script>

View a more detailed example of the video player

Accessibility Considerations: 

There are many things to consider when it comes to accessibility and media.

  1. All media must have captions. UNL MediaHub makes this easy, by allowing you to order captions for video.
  2. Avoid auto-playing media: Media that automatically plays when a page is loaded can be confusing and unwanted.
  3. Keep flashes of light to a minimum. Excessive flashes and/or strobing effects can cause issues for people who are prone to seizures.
Usability Considerations: 

Media should be hosted on the unl.edu domain whenever possible (as opposed to YouTube, etc.) to ensure that it is available to all visitors. Some locations such as China or K–12 schools will block popular media hosting platforms such as YouTube or Vimeo. To ensure that everyone who visits your site can watch media, please host the content on unl.edu. An easy solution for hosting media at UNL is UNL MediaHub.

Contributed By: 
IIM