Updates to the HarpPlayer™

We’d like to share a couple recent updates the the video player in your Cascade templates. These updates provide a little more flexibility and accessibility for the video elements.

1. You can drop the controls below the player if you have the space and need that section of the video for captions, etc.
2. You can hide volume controls if the video has no volume.

Below you can see some example code that will output your video in these sweet new ways. 

<div class="cu-video drop_controls">
  <video class="video" autoplay="" aria-label="Clemson Works Video" preload="auto" poster="../_images/campus-life/finding-your-community/video.jpg" crossorigin="anonymous" data-transcript="transcript" data-hidevolumecontrols="">
    <source type="video/mp4" src="https://media.clemson.edu/ows/web/community.mp4">								 
    <source class="descriptions" type="video/mp4" src="https://media.clemson.edu/ows/web/community_AD.mp4">
  </video>
  <div class="controls">
    <button class="pause-play playBtn ended">
      <span class="las la-play"></span>
      <span class="las la-pause"></span>
      <span class="las la-redo-alt"></span>
      <span class="sr-only">Video ended. Click to replay.</span>
    </button>
  </div>
</div>

• In the containing div element (with the cu-video class), the additional “drop_controls” class will drop the controls area below the video.
• Notice in the video element above the “data-hideVolumeControls” attribute. That will hide the mute, volume down, and volume up buttons. 

See below for an example of these video settings.

We hope these updates allow you a bit more flexibility and contribute to delivering the Clemson message on your sites.

For more information on video elements and accessibility see the audio and video digital accessibility concepts on the Accessibility Portal.