Various factors need to be considered when incorporating videos in Web design, in order to ensure that they are used effectively. Some relate to technical aspects of video, such as quality, file size, file formats, and compatibility, while others relate to appropriateness of use.
1. Video File Size
Video is made up of series of consecutive bitmapped images displayed per second. These images are referred to as frames, and their dimension (i.e., pixel dimension) are referred to as frame size. The number of bits used to represent each pixel of each frame is known as color depth, and the number of frames displayed per second is known as frame rate. Figure 7.20 shows a broad illustration of the anatomy of a video, including an audio accompaniment.
FIGURE 7.20 An illustration of the components of a digital video track.
When shooting and editing a video, frame size, color depth, and frame rate are some of the properties that need to be specified. In principle, the higher the values of these properties, the better the quality of video. The size of the file produced, of course, is also larger. As you might recollect from Chapter 6, a high-quality bitmapped image produces a relatively large file. Imagine many of this per second, and you might get a general idea of the file size generated by high-quality digital video. Where there is an audio accompaniment, this naturally adds to the size.
As an example, a 1-second standard definition (SD) resolution (720 x 576) video digitized at 16-bit color depth and 25 frames per second, with CD-quality audio accompaniment, can generate as much as 20.91 MB of data. Standard definition resolution is the traditional resolution used in television. More current definitions include high definition (HD) and ultra-high definition (UHD), which support resolutions up to 8192 x 4320, both of which support higher resolutions. Whichever standard is used to encode a video, the amount of data generated is simply more than what Internet connections or systems can handle speedily. This is why compression is needed even more for the delivery of video than for other media object types.
Like with audio, the amount of bits generated per second in video is known as bitrate, and the quality of video is generally defined in these terms. The formula to calculate it is:
Video bitrate = frame size x color depth x frame rate
This means that the bitrate of the example cited earlier is 167 Mbps. To minimize bitrate without significantly compromising video quality, video compression standards use various techniques, including reducing the number of bits used to represent the color of the pixels of a frame and using various other techniques.
2. Video File Formats and Codecs
There are numerous video file formats, each of which supports different frame sizes, color depths, and frame rates. Where they support compression, they offer these parameters at different bitrates. A video file format can support only its native codecs, or, if it is a container format, it can support many types of codecs. When preparing a video for a Web page, the video editing program that you use would typically offer the opportunity to choose various combinations of formats and codecs. Standalone video encoders, such as free Mediacoder, also allow you to do this. The recommended formats and codecs when using HTML5 have been presented earlier in Table 7.9. Video encoded with H.264 codec and placed in MP4 file container format is by far the most commonly used video on the Web. The full name for MP4 is MPEG-4 Part 14, and H.264 is also known as MPEG-4 Part 10 or MPEG-4 AVC (Advanced Video Coding). As of time of writing, the successor to H.264, H.265, is yet to be as widely adopted. H.265 is also known as MPEG-H Part 2 HE VC (High-Efficiency Video Coding) or H.265/ HEVC. It is designed to provide higher resolutions at the same bitrates as H.264. It has been said, for example, to be capable of twice the compression produced by H.264 at the same level of video quality and better quality at the same bitrate. Other commonly used formats that you might come across include AVI, WMV, and FLV (which is used for Flash videos).
3. Guidelines on Effective Use of Video
The use of video on the Web has gone up tremendously over the last decade or more, owing to the advent of video-sharing websites, such as YouTube, and the migration of news media to the Web. However, delivering videos on video-sharing websites is different from delivering them on your own site.
While capturing and uploading video to a video website may only require the knowledge of how to shoot a good video at best, incorporating video in Web page design requires more than the basic desire to do so or indeed personal preferences; it requires the knowledge of issues such as when it is appropriate to use it, what to use it for, its effects when combined with other media object types in a design, the relationship between quality and the effectiveness of the message being communicated, and the frame size that is appropriate.
3.1. Appropriateness of Video in Design
Video in Web design should be used only if it is essential to the understanding of the message being communicated. Content should take advantage of the dynamic nature of video for the use of video to be justified; that is, if there are no significant movements, static images combined with text are adequate. Even when it may be useful to use video, if the quality is lacking (e.g., in terms of clarity, size, and speed), then using it is pointless and it seldom adds any value. Even more, this often projects lack of professionalism. Also, rather than using video, animation may be considered if it can communicate the same message effectively. Of course, there are the production advantages and disadvantages. For example, creating a video can be as easy as pointing a camcorder and shooting, while creating an animation typically requires more skill, time, and effort; however, it produces a smaller file and offers more control over the details of the content.
3.2. Video Quality in Design
As mentioned earlier, video quality revolves around bitrate. It determines the frame size and frame rate that produce acceptable quality. Essentially, the higher the bitrate, the bigger the frame size and frame rate that you can use and still maintain good picture and motion quality. For example, a bitrate of 1.5 Mbits/sec will not produce good-quality video with a 720 x 576 frame size, let alone HD resolutions such as 1280 x 720 and 1920 x 1080. This means that it is important to choose a format and a codec that offer the bitrate that supports the frame size and frame rate needed for a design. A codec that is capable of producing high quality at low bitrate, such as H.264, and the successor, H.265, is ideal. However, low bitrates typically do not cope very well with high levels of movements in a video. Among the factors considered when balancing quality against bitrate are the level of clearness and detail required for a video, which in turn depend on other factors, such as video content and the screen size of the target device. For example, in terms of video content, a low bitrate and frame size would probably suffice for a talking-head video that is unlikely to be viewed full screen, while high bitrate and large frame size are required for a video with a scene that contains a lot of things that need to be seen clearly.
Obviously, given the direct relationship between bitrate and frame rate, the higher the bitrate, the higher the frame rate that can be used. However, not all types of videos require high frame rate. The summary of the relationship between frame rate and quality is that high bitrate and low frame rate would produce clear images, but motion can be choppy, while a video stream with low bitrate and high frame rate will likely produce blurry images and “trailing” effects (particularly if frame size is large) but smooth motion. Generally, the more the movements in a video, the higher the frame rate required to make it appear smooth. Above all, when video is intended for the Web, the consideration of the target audience’s connection speed is paramount, particularly when delivery is live, as in a broadcast.
To help balance the quality against bitrate, most modern codecs, such as H.264 and H.265, offer different bitrates that are optimized for specific frame sizes and frame rates, making them best suited for different applications. H.264 offers these properties in the form of profiles and levels, examples of which are shown in Table 7.11, and H.265 offers them in the form of profiles, tiers, and levels, examples of which are shown in Table 7.12. Main profiles are suitable for most applications, and high profiles are suitable for applications that are more demanding. Notice that you have a choice of different bitrates (quality) for the same frame rates and frame sizes. Also, notice that the same frame sizes and rates can be achieved with less bitrates in H.265 than in H.264. You should know that the lists are not comprehensive; more comprehensive ones can be found on the Web for different codecs. There are also various on-line bitrate calculators designed to help calculate the optimal bitrate at which to encode a video file to achieve what is considered good quality.
3.3. Video Content in Design
Videos are used in various ways online as well as are delivered on various types of devices. They are used to deliver entertainment as well as information, in which they are combined with other types of contents, such as text and images, and it is within this latter context that more design issues arise and the guidelines given here apply.
- Using Only Video to Provide Information Avoid relying solely on video to provide information. This is because users may not be able to access it, or the video may not play properly. Also, users may not be able to see or hear it. Instead, also provide content via other communication channels, such as text, which can be read or read out by the screen reader. Captions and a full transcript should be provided to comply with accessibility guideline.
- Starting Video Automatically Like with audio, videos should not start automatically, either as users arrive at a page or while they are browsing it. Asking users to stop a video if they do not want it, rather than letting them start it if they want it, amounts to giving them an unnecessary task to do, and this can be irritating. Not only this, it can make a page inaccessible to people using screen readers, because the sound from the video can interfere with the output of the screen reader and it can be difficult for them to know what to do to turn off the video.
Videos that start automatically in the middle of browsing can be especially irritating, because it is not always obvious where on the page the video is or which out of the many videos is playing. Even with the sound turned off, a video that starts without user’s content can be distracting to the user, as moving objects consistently attract attention.
Even when users click a link text to arrive at a page for a story, video should not start automatically. Users may not want to see the video and may instead only want to read the text equivalent of the story. This means that starting video automatically gives them the extra task of having to turn it off. Not only that, it can cause download-speed problem, which can result in a page to freeze up for a considerable amount of time, during which period you can neither watch the video nor scroll down to read the text.
In all cases, users should be provided with controls to start, stop, restart, or mute a video, as well as to adjust its volume. If relevant, provide information to users about how they can find out more about a video after they have finished viewing it. This may, for example, be in the form of related links and/or thumbnails. A thumbnail should be of good quality and be able to scale well, so that it can still be clear when bigger. It should also be representative of a video’s content. Ideally, it should be taken from the middle of the video, where content is better represented, rather than from the beginning.
- Information about Video Content Provide information about the content of the video in order to help users know what they are viewing or help them decide whether or not they want to view it. This can ensure that those interested in the content of a video do not skip it. Information provided should include a descriptive but concise name or title of the video, the topic covered, information about content (e.g., presenter and/or people), and duration, as users usually like to know how long they are going to spend to download and view a video. If video is long, to make it possible for users to skim through its content, a list of content or topics, or transcript, should be provided to help them navigate to the desired parts of the video.
For people who cannot see or hear or those who cannot hear or read rapidly, provide text or audio alternative, as appropriate, that conveys the same information as in the video, so that they can have access to the video’s content. The link to the text or audio file for the alternative should be placed near the video. Link text should always describe video content accurately.
- Conciseness of Video Videos that provide information should be straight to the point. Introduction should be short, ideally 5 s or less, and the goal should be to identify source of information and the video’s content. Users generally need to know what a video is about and determine whether or not they want to see it. Long introductions or slow and weak start to a video are a put-off and can cause users to lose interest quickly and leave, even if they might have stayed if the true content had been revealed sooner. This is one of the reasons why well-planned and thoughtful editing is crucial. Where there are many videos to watch, providing introduction with each can quickly become annoying. It may be best to provide an introduction clip and skip any detailed introduction in the rest of the videos.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.