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
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • By
    9 Incredible CodePen Demos

    CodePen is a treasure trove of incredible demos harnessing the power of client side languages.   The client side is always limited by what browsers provide us but the creativity and cleverness of developers always pushes the boundaries of what we think the front end can do.  Thanks to CSS...

  • By
    CSS Selection Styling

    The goal of CSS is to allow styling of content and structure within a web page.  We all know that, right?  As CSS revisions arrive, we're provided more opportunity to control.  One of the little known styling option available within the browser is text selection styling.

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!