5 Rules For Using Audio/Video Media on Your Site

By  on  

I don't create many sites that feature multimedia. Most of my customers don't have a need for audio or video on their site but we occasionally get a request to add an advertisement or webinar. That said, I've scoured the internet enough to have seen good, bad, and ugly uses of multimedia on the web. The following are my guidelines for using multimedia on a website.

Avoid Autoplay

Autoplay is a touchy subject. From my experience, autoplay isn't the way to go. A user could enter the page and walk away from their computer. The volume on the user's computer could be too high or too low and the autoplay could blast them out before they can adjust their volume. Additionally, autoplay could be a waste of bandwidth. Unless you run a video site like YouTube or MetaCafe, don't use autoplay.

Always Give Stop, Pause, and Volume Controls

I've actually found myself on websites that autoplay media and don't provide stop, pause, and volume controls. Needless to say, not providing media player controls is a terrible practice.

Make the Media Player Easy to Find

There's nothing worse than hitting a page with a lame song or video playing and not knowing where the hell to turn the thing off. Place your media players in an easy to find area on your site. Burying this media player on the page will only guarantee that your user sets the record for quickest "back button" click ever.

Quality -- Everything or Nothing

I can't stand when a video or audio snippet is placed on a website to support an article but the media is of such poor quality that they actually damage the article's credibility. Provide quality video, even at the expense of load time -- I'll wait for something good.

Warn Users About NSFW Material

Unless your website is clearly NSFW as a whole, clearly label any audio or video "NSFW" (and definitely DO NOT auto play this material). Failing to warn users about NSFW material can get the in trouble at work or at home and that will make for one pissed off former user.

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    dat.gui:  Exceptional JavaScript Interface Controller

    We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there's a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them.  Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives...

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

Discussion

  1. Is it a good idea to incorporate videos on blogs? I have seen so many people doing it but generally they fail to link them with the theme of the blog.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!