Photo by Christina @ wocintechchat.com on Unsplash
It’s hard to imagine that at one point in time the internet didn’t have the audio and video capabilities that it does now. Just imagine, no music or YouTube- pretty boring right? Thankfully we’ve evolved since then and can now add audio and video with ease through HTML. In his tutorials titled Learning Web Audio and Video from LinkedIn Learning, Joseph Labrecque breaks down the process of adding audio and video to a webpage. Being able to add audio and video elements to your website is an essential part of web design. These elements tend to draw your audience into whatever message you are trying to get across, even more so than graphics ever could.

So what’s next?

Before applying this newfound knowledge of HTML audio and video tags, you must know how to use them responsibly. Overusing these elements could potentially be a huge turn-off and annoyance for anyone coming to view your site. A post titled How to Use Video and Audio to Enhance your Website takes you through the do’s and don’ts of adding each element. This post has thorough explanations of each guideline and I highly recommend reading them to grasp the full understanding of why this is so important. To save some time, I have created a checklist of questions based on this article to help you quickly decide whether or not an audio or video file is a good idea for your website. 

Audio Checklist:

  • Is the Audio necessary?
  • Will the Audio create a positive user experience?
  • Will the Audio be an annoyance to your audience?
  • How will it affect the performance of your website? (i.e. loading content quickly)
  • Can the Audio improve user accessibility?

Video Checklist:

  • Is your Video file compatible with multiple browsers?
  • Does your poster/ cover image on the video entice your audience to click on it?
  • Is the video file reasonably sized for your website loading speed?
  • Is the video too long?
  • Is the video experience on a mobile device the same as on a desktop?
  • Will your video or website support Closed Captions (CC) for better accessibility?

Each one of these questions is important because it all goes back to the creation of a positive user experience. Knowing how to code each audio and video element is just as important as knowing when and where to place them. You always want your audio or video files to work for you and not against you. Adding audio and video with HTML can be easy but now knowing how to use it to your advantage can make the process even more enjoyable!

Do you have any tips on how to better incorporate audio and video into a website?

**NOTE: This chapter is a revised version of a blog post titled “Guidelines for adding Video and Audio Elements to your Website” on Journey to the Center of the Web blog

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Publishing for the Web Copyright © by TCOM 3335 (Spring 2021 and Fall 2022) at UHD is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book