Use Only One Media Element at a Time

This is more of a rule of thumb than a hard and fast rule—there are instances where you want to have multiple audio or video elements playing simultaneously.

However, most of the time you don’t. Most of the time the audio or video clips are actually a playlist, and you should refresh the media element rather than put a second one on the page. Hopefully the architecture I outlined in my talk will nudge people towards this path.

There are a couple reasons for this rule: First, you don’t want to have 20 videos all prefetching their data when only one is going to be played. Even if you did, you’d still want the first video to load, then start pre-fetching the rest.

But even if you handled the caching issues correctly, it’s still bad. I’ve experienced some subreddits where the norm is to post plain video links (as opposed to hosting on Vimeo or YouTube). Reddit simply loads this videos as tags. The first twenty or so play fine, but as you scroll down the page, eventually the videos won’t even be able to load, at least on iOS, because there are just too many video elements on the page.

Media elements are pretty memory hungry. Try to use the fewest you can at one time.

Current Elm Difficulty = Medium

Playlist management is slightly tricky with virtual dom. You should probably use a keyed node and change the key when the source changes, so virtual dom creates a new node, but this a bunch of stuff to keep track of.

The architecture I’ve proposed in my talk should make this trivially easy.