HTML5 Video and Cross-Origin Issues

Looking to make your HTML5 video code Section 508 / ADA and WCAG 2.0 compliant?

Over the course of the past few months, there has been a need for placing video on websites that meet Section 508 / ADA and WCAG 2.0 guidelines. To meet these guidelines (WCAG 2.0 Guidelines found under 1.2, which also satisfy Section 508), I have used the HTML5 video element.

Disclaimer: Please note that the information I’m presenting here is interpreted according to specific compliance guidelines put forth in my work environments. They are designed to meet Section 508 / ADA and WCAG 2.0 Guidelines Level AA for the videos and transcript models provided to me. Please use as a guide, but refer back to the WCAG 2.0 Guidelines and Section 508 / ADA rules to ensure it meets the needs of your organization.

Requirements

Here’s the current items I have to work with:

  • An open-source content management system
  • Video(s) from an external service serving out secure website addresses
  • Video transcripts in the form of *.vtt from an external service serving out secure website addresses
  • HTML5 and CSS3

The Code

 <video crossOrigin="anonymous" style="width: 100%; height: auto" poster="img/poster.png" controls controlsList="nodownload"> 
 <source src="https://www.mywebsite.com/video.mp4" /> 
 <track label="English" kind="subtitles" srclang="en" src="https://www.mywebsite.com/video.vtt" default /> 
 </video>

High-Level HTML5 Semantics

<video ...>
   <source .../>
   <track .../>
</video>
  • HTML5 allows us to use the video tag to embed video located within our website hosting or another website, such as YouTube or Vimeo. Within this tag, I can specify an image to use as a placeholder and this is indicated with the poster attribute.
  • The source tag is used to reference the location of the video. In most cases I would provide the video source within the video tag, but in this case, my videos are located on another website serving out secure website addresses, so I use the source tag.
  • The track tag is used to reference the location of the transcript file. Usually, the transcript file is named the same name as the video file, but with a .vtt extension. In some cases, the extension may differ to meet closed captioning guidelines.

The <video> Element

<video crossOrigin="anonymous" style="width: 100%; height: auto" poster="img/poster.png" controls controlsList="nodownload">
  • crossOrigin=”anonymous” was used in this example because the source of my video and transcript were from another website served over a secure website address (one that begins with https://)
  • The style attribute is pretty straightforward and I could have referenced a class with these parameters. It basically ensures that the video fills 100% of the width (whether a <div>, <table>, or whatever its parent object) and the height auto-sizes to the parent object. This basically is the method to make the video element responsive.
  • The poster attribute acts as a placeholder image that shows up prior to any video interaction. I have specified one because I have set my videos to not autoplay since enabling such feature does not meet Section 508 and WCAG 2.0 guidelines.
  • The controls and controlsList=”nodownload” attributes are used to display the HTML5 video playback controls. Although possible by other means, we wanted to hide the download video button that appears on the control bar when on Google Chrome. Google released a few months back a control added to the HTML5 video attribute that aids in removing this button from the video controls interface. If you prefer to allow users to download the video, just remove that attribute.

The <source> Element

 <source src="https://www.mywebsite.com/video.mp4" />
  • The src basically refers to the video you wish to use

The <track> Element

<track label="English" kind="subtitles" srclang="en" src="https://www.mywebsite.com/video.vtt" default />
  • The label indicates the language of the transcript. In this case, I’m using an “English” transcript.
  • The kind attribute indicates the type of track information being provided. In my case, they will be subtitles. For a more detailed list of parameters, see this link: https://www.w3schools.com/tags/tag_track.asp
  • srclang refers to the language code associated with the transcript if you specified kind=’subtitles’. In my case, it is en, which stands for English. Refer to this link for a list of language codes: https://www.w3schools.com/tags/ref_language_codes.asp
  • The src refers to the website address of the transcript file. As a note, my transcript files are usually the same name as the video, but with a .vtt extension. I also keep the transcript files in the same directory as my video file. I have found issues when I do not do it this method.
  • default is the last attribute specified because I would like this track to be the default transcript the video should use. A video can have more than one track elements in different languages, however, a default track should be identified.

Conclusion

There are certainly many combinations on how-to configure the video element to meet both your organization and compliance needs. This is just a head-start on how I implemented the video element to meet the needs of my work environment. Happy coding!

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s