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?

Use a Player

Please use a player, don’t just use the built in element. The Builtin controls are inconsistent across browsers, and can be very limiting. Or maybe they expose too much. Either way, either use your own player or use a third party.

Hosting video is hard too, and the easiest path may be to go to a site like YouTube or Vimeo or Wistia for your videos, or SoundCloud for your audio. That’s fine. I’ve used all of those.

But there are lots of situations where it’s necessary or desirable to use your own. Please do, don’t just use the default players.

Current Elm Difficulty = Hard

It’s fairly easy to embed a Vimeo or YouTube video, but if you need customization, you’re either going to have to write your own player or jumpy through some very hacky hoops to use a third-party player. You could try wiring it up in a web component, but this is hacky, and might violate the user agreement of the player.

PreviousHave Fun with DesignNextHave Closed Captions (or Transcripts)

Last updated 6 years ago

Was this helpful?