As I continue to learn more about website creation, I am continually amazed at how much control a developer has over the display and interactive features of video and audio content. I highly recommend Joseph Labrecque’s LinkedIn Learning course, Learning Web Audio and Video, if you’re interested in embedding media files in your website or learning the code necessary to customize those files. Labrecque has more than 15 years of experience building expressive web, desktop, and mobile solutions.
Last updated August 17, 2020, Labrecque’s course is one of the most interactive tutorials I have viewed on LinkedIn Learning thus far. Although he recommends using Visual Studio Code, I used TextEdit while following the course’s exercise files. I was amazed at how much I accomplished, given my limited experience with coding. Despite the tutorial being easy to follow, there was one segment I was unable to master.
Section 3 of the course, titled Work with Video Elements, has a part that discusses media accessibility. During this segment, Labrecque explains how to add captions to video files. No matter how many times I tried, I could not get the captions to display in my video file example. I may have had an incorrect piece of code somewhere. I also had trouble accessing the Web Video Text Track (WebVTT) document included with the course exercise files. Throughout the course, I realized that TextEdit may not be the best program for working with extensive lines of code.
My experiment with adding captions
Because the caption feature interests me, I decided to try the exercise again using my own video clip and WebVTT file. I used a quick 19-second clip from my phone for my experiment—the video pans across a short segment of Kanarra Creek, located in Kanarraville, Utah. During the clip, you see some canyon rock formations, Kanarra Creek, and a brief glimpse of me hiking through the water. The creek is a trail path that leads to two waterfalls. Since the clip is short, I decided the following three captions would be sufficient.
- Kanarraville Canyon rock formations
- Kanarra Creek
- Amanda hiking through the water
Creating your own WebVTT file
WebVTT files are a critical component for adding captions to videos. Although Labrecque uses a WebVTT file in his media accessibility exercise, he does not explain how to generate the document. For help with this, I turned to Sofia Enamorado and her article, “How to Create a WebVTT File,” written for 3PlayMedia. Enamorado is the marketing programs manager for 3PlayMedia, a company that provides media accessibility solutions. Her article, last updated June 3, 2019, provides instructions for both Mac and Windows users. The steps for creating a WebVTT file are concise and easy to follow. I found the way Enamorado numbered the Mac instructions odd; they seem to lack the Windows instructions’ sequential order. Despite the numbering, I was able to create a WebVTT file to accompany my video clip.
I like the visual Enamorado includes with the section of her article that describes the different parts of a WebVTT. She takes care to note which parts are required and which features are optional. For instance, comments can be added to WebVTT files that the end-user does not see.
I also appreciated that the article discusses a couple of downsides to creating your own WebVTT file, the main one being time. According to Enamorado, it takes 5 to 10 times a video’s length for an experienced transcriptionist to create captions. Also noted is the importance of making sure your captions are compliant with accessibility laws. 3PlayMedia has a webpage devoted to Accessibility Laws. Commenting on the downsides of creating your own WebVTT files may have been Enamorado’s sales pitch for 3PlayMedia’s services. Still, accessibility laws and the time it takes to generate captions are things one should consider when adding captions to videos.
So, did my experiment work? Not at first…
I thought I had it right…
I’m going to fast-forward through several hours of frustration and briefly explain what happened. Although I followed Enamorado’s instructions to the letter, my WebVTT file would not upload to my WordPress media library. I scoured through various blogs and forums, trying to figure out why. The best answer I found relating to my problem came from StackExchange, an online Q&A community.
Based on comments posted in December 2018, it seems that WordPress could have an issue reading my WebVTT file’s Multipurpose Internet Mail Extension (MIME) type. MDN Web Docs provides some literature regarding MIME types if you’d like to read more about the subject. Instead of embarking on that tangent, I’d like to continue telling you about my experiment.
The solution to my WebVTT file upload problem
Rather than figuring out the problem with my MIME type, I decided to try VTT Creator. This website lets you create captions for videos then download the WebVTT file. Even though the site displays Login and Sign Up buttons at the bottom right corner of the screen, you do not need an account to create a file.
VTT Creator is easy to use. You can create new caption cues manually or upload an existing WebVTT file. I chose to upload the WebVTT file I already made, then I tweaked the caption start and end times.
Finally!! My video with captions
WordPress seems to like the file type generated by VTT Creator; I successfully uploaded the document to my media library. I used a Custom HTML block to add the video and track elements. The captions do not play with the video by default, so after you click the play button, click the subtitles icon near the bottom right corner of the video screen, then select English. Also, the subtitles may not display in all web browsers.
The screenshot below shows the code I entered into the Custom HTML block on my blog post.
Note: This chapter is a revised version of a blog post titled, “Adding captions to videos in WordPress: Not as easy as I thought…,” on The Netizen Praxis.
