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
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    PHP IMDB Scraper

    It's been quite a while since I've written a PHP grabber and the itch finally got to me. This time the victim is the International Movie Database, otherwise known as IMDB. IMDB has info on every movie ever made (or so it seems). Their...

  • By
    Fancy Navigation with MooTools JavaScript

    Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where's the originality? I've created a fancy navigation menu that highlights navigation items and creates a chain effect. The XHTML Just some simple...

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!