Accessible Video and Transcripts
With HTML5 on the horizon, it is becoming far easier to embed video on a web page than it has been. Sure, you can drop some code copied from YouTube, but you have little control over the HTML or the video output. Once you do have your video, you also need to bear in mind that not only are video (and audio) transcripts good practice, they are required by law for many organizations.
HTML5 Video Captions
Bruce Lawson has been kind enough to put together an example and code (Accessible HTML5 Video with JavaScripted captions) for his method to embed synchronized captions, using JavaScript for the synchronization, with a video embedded using the HTML5 video element. The caveat here is that you need to have a browser that supports the open Ogg Theora codec. You can check out the sample video if you have such a capable and sweet browser. [Note March 11, 2017: Opera has pulled the sample video, prevented the WayBack Machine from archiving it, and refuses to update its robots.txt so that it will appear in the archive.]
YouTube Automatic Captions
Some of you may remember my post about how YouTube can now automatically caption your videos using speech recognition software. While the results can be interesting, you can at least edit the captions coming out of YouTube. Terrill Thompson describes how he grabbed the .sbv caption file from his video and updated it, then uploaded it back to YouTube for a much more useful result.
Why Transcripts?
Shawn Henry leads the education and outreach effort promoting web accessibility at the W3C Web Accessibility Initiative (WAI). She recently wrote an article titled Transcripts on the Web: Getting people to your podcasts and videos that explains why you would want to do this, some best practices, and even some resources. For example, in addition to supporting users who are deaf or hard of hearing, she points out that search engines can index a transcript where they cannot index a video or audio file. This adds to the overall SEO strategy for any site. Her best practices go beyond what the captions mentioned above provide: she points out that sometimes we need to state how many people in a video raised their hands in response to a question. She is good to not browbeat the reader with a reminder that WCAG 1.0, WCAG 2.0 and Section 508 all require transcripts — at least not until the end of the article.
If you have a few minutes after reading all these other links, consider reading the interview with Shawn Henry, W3C’s Shawn Henry on Website Accessibility, from last week over at Freelance Review.
Update: February 29, 2016
Take a look at Web Axe’s post Captions and YouTube for tips on how to correct YouTube’s auto-captions.
5 Comments
Reply Thanks for sharing—this is useful info!
I'm going to look into adding transcripts for my company's videos.
Reply If you do that, please do send along a link. I'd like to check them out.
Reply Hi, Shawn,
I know that this is a fairly old post, but I'm looking for a simple way to get a transcript to automatically scroll as I play a video on the same page.
If there's a solution that will work with an embedded YouTube video, then that would be great.Here are the features I'm looking for:
:: When the video is played, the transcript auto scrolls in sync.
:: When the video is scrubbed forward or backward, the transcript will automatically jump to the new timecode.
:: The user has the ability to click a phrase/word/syllable/letter in the transcript and the video player will jump to that timecode.
:: The user has the ability to turn off automated scrolling of the transcript.
:: The user has the ability to toggle off the function of clicking a word seeking to that point in the video (meaning that words in the transcript could contain hyperlinks to pertinent information such as Wikipedia entries, Twitter profiles of people being mentioned, other videos being mentioned, etc.)YouTube is good insofar as:
:: It provides a free hosting solution.
:: It provides the only free solution I'm aware of to automatically synchronize a transcript to the audio of a video and auto-generate subtitles.
(The automated line breaks are usually borderline useless, however this caption/subtitle file can be downloaded, manually edited, and resynchronized once we have the first automatic rough draft.)
:: While on a video's page on YouTube.com any timecode mentioned in the description or comments is a hyperlink which will seek the player to that hour/minute/second.
:: We can easily append a timecode to the end of a YouTube URL to seek to a particular quote on page load.However YouTube is limited to the degree that:
:: When embedding a YouTube video on an external site, I do not know of a way to have timecode links on that page affect the video player's progress bar.
:: Because of this, while I can display a transcript alongside the video and have a link to a timecode for each line/phrase in the transcript, it will want to open the link to that YouTube video in a new tab on YouTube.com rather than seeking to that point in the video player that I've embedded on the same page.
:: I know of no way for the transcript to know where the video player is progress-wise, and therefore do not know how to automatically scroll the transcript to the part being spoken in the video if the user manually scrubs forward or backward.A Javascript video/transcript viewer that could take a simple SRT subtitles file and an MP4 video and play then in concert as I've outlined above would be ideal.
Bonus points if it:
:: can work on mobile devices rather than the video being shuffled off to the mobile OS' default media player
:: can apply dynamic animations to the text currently being heard, such as a subtle highlight moving across different phrases, based on the number of characters between a beginning timecode and finishing timecode for said phrase.Please let me know if you're aware of anything like this.
I'm @natelawrence on Twitter.
In response to . Reply My apologies, Adrian!
I'm wishing there was an option to edit my earlier comment now.For anyone who happens across my question, I added a bit more detail over on my blog. http://notes.natelawrence.net/transcriptsync/
If anyone can help, please do jot me a note.
In response to . Reply Hi, Nate.
I'm not Shawn, which may be why I can't help you without spending some time writing a solution from scratch. I have put your question out the Twitterverse, however you may want to ping Shawn and see if he has written anything about this.
Leave a Comment or Response