Web Audio and Video Best Practices
  • General Best Practices for Working with Web Media
  • Have Fun with Design
  • Use a Player
  • Have Closed Captions (or Transcripts)
  • If you have to use Autoplay, Mute the Audio
  • Use Only One Media Element at a Time
  • Use fragmented MP4
  • Use Fallback URLs
  • Use "type" and "codec" Attributes with your Fallback URLs
  • Actually, You Should Probably Use HLS or MPEG-DASH
  • Use Fallback Urls with HLS and Dash
  • Conclusion
Powered by GitBook
On this page

Was this helpful?

Have Closed Captions (or Transcripts)

he Media API makes it easy to include Subtitles or Closed Captions. You should do it. There’s so much video content on the web that is essentially useless to the hearing impaired, and that’s not fair.

Plus, Google apparently indexes closed caption files, so you adding subtitles IMPROVES SEO!!! Easy sell for your boss!

Rev.com will caption your English-language video for about $1 per minute. You can also put the video on YouTube and download the automatically generated captions, but they’re not very accurate and you’ll probably have to edit them.

You can also do this yourself if you’re willing to put in the time and effort.

Rev will transcribe spoken word content for about the same, which is really worth doing for your podcast, both for the hearing impaired and for SEO purposes.

And once you’ve made a captions file, you can easily get it translated into other languages and use those as subtitles.

Current Elm Difficult = Medium-Hard

Adding text tracks is easy, elm/html includes a track element.

However, actually adding the ability to show, hide and disable tracks requires you to either use ports in a fairly hacky way, or create a fairly hacky web component. I’ve done both.

Honestly, if I could only change one thing in elm/html & virtualdom, it would be a small change to make changing the mode on a track element easy, to encourage the use of closed captions.

PreviousUse a PlayerNextIf you have to use Autoplay, Mute the Audio

Last updated 6 years ago

Was this helpful?