Audio and Video
The previous section taught you how to add graphics to your webpage. Once you have a handle on that, let’s get into the ins and outs of embedding audio and video. It could be a very important aspect for a webpage so that visitors can see and hear important information. In this section, you will learn how and when to add videos to your webpage, the fundamentals of embedding audio and video, and the best way display these types of media.
Chapters 1-9 will cover what you should consider when implementing audio and video while learning how to implement audio and video through code. Chapters 10-17 will cover the technical aspects of using HTML to add video and audio to your website. It is also important to note that the chapters in this section will refer to Joseph Labrecque’s LinkedIn Learning video Learning Web Audio and Video which is highly recommended.
The following information is a quick synopsis of what you can expect in this section:
Before you start working with audio and video you will need to learn some basics that will be introduced in chapter 6.1. In “The Basic of HTML5 Video” you will learn different video player attributes and the importance of making videos responsive for all screen types. After learning the basics of HTML video you will move on to chapter 6.2 where you should consider “When to Add Sounds to Your Website“. Whether it be for alerts and notifications adding sounds to your website can be either a good thing or a bad thing. After figuring out whether adding sounds to your website can benefit you, you will be ready to add and embed audio and video in HTML.
In chapter 6.3 “Embedding Audio/Video in HTML for beginners” you will be provided with two video tutorials that are beginner friendly and will help you setup the code necessary for embedding audio and video. Before publishing your video and/or audio, it is recommended to read chapter 6.4. “Guidelines for adding Video and Audio Elements to your Website” covers when and where to place video and audio to your website while providing a checklist to help you make sure if your video and audio are ready for publication. If you are instead publishing video and audio trough WordPress, it is recommended to read chapter 6.5. In “What to Consider When Adding Video to Your WordPress Website” you will learn what video hosting service would be the right choice for you. Regardless of where you planning to add a video make sure to read chapter 6.6. In “(Video) Avoid these 4 Mistakes When Adding a Video to Your Blog” you will learn four mistakes you should avoid when adding videos to your website.
Adding videos to your website is important for many reasons and they do not necessarily have to present for entertainment purposes. In chapter 6.7: “The Benefits of Adding Video to Your Website” you will learn that by adding videos to your website, you are encouraging engagement, ranking higher in SEO, and providing uniqueness to your website. It is also beneficial to add subtitles in your videos. Before knowing why you should add subtitles in your videos it is recommended to read chapter 6.8: “The Important History of Subtitles and Captions” where you will learn the evolution of subtitles and captions from its early concepts to the present day. In chapter 6.9: “The Importance of Having Subtitles in Your Videos” you will learn how adding subtitles in your videos can help viewers better understand your video whether they speak a different language or have hearing disabilities.
If you are working with a WordPress powered website and are having trouble implementing captions in your videos, reading chapter 6.10 can help you. “Adding Captions to Videos in WordPress: Not as Easy as I Thought...” has the author sharing their tips and advice on how to add captions to your videos. After adding captions to your videos, it is recommended to read chapter 6.11: “How to Create an HMTL Video Player and Style It with CSS” to create and style a video player with important features such as play, pause, and download. After creating and styling your video player you might want to make sure that autoplay isn’t enabled. Chapter 6.12: “Autoplay is an Accessibility Nightmare” recommends turning off autoplay to help those with sensory sensitivities and for those that use screen readers.
In chapter 6.13 “The Element of Video on the Web” the author talks about their experience using the video element and provides resources that will help you as you continue to work with videos. If you decide to include audio and video in your website, chapter 6.14 has you covered. “Using HTML to add audio and video to your website also with Soundcloud!” will teach you how to implement both audio and video from SoundCloud into your website using the appropriate code for HTML.
If you do not possess any previous knowledge of JavaScript then it is highly recommended to read chapter 6.15 “JavaScript: Not for Beginners?“. In this chapter you will learn the basics of JavaScript while learning how it can help you work with videos. In chapter 6.16: “Using iFrames Consciously” the author will introduce you to iFrames while teaching you how to use them. Chapter 6.17: “Thoughts on Audio and Video” will provide you with additional resources that will come in handy whether you are beginning to work with video or have been doing so for some time.
