AWF - Enhancing Sites with Multimedia [LESSON]
Enhancing Sites with Media
Multimedia
Have you ever accessed an online tutorial? What made the tutorial beneficial for you? It was probably the ability to view the steps via a video. Because high-speed connections are more available to the public, video has transitioned from simply a source of entertainment to a critical source of content and information for users. This lesson will provide options for coding digital media options to share information and enhance the experience users will encounter when visiting a website.
Multimedia is a communication tool that uses a combination of several forms of media, including text, audio, images, animations, and/or video into a single presentation. When creating websites, you can think of the site as a presentation. It is the opportunity of the company or person that publishes the site to present to the viewer information and communicate with the viewer in a dynamic way. Popular examples of multimedia include video podcasts, audio slideshows, and animated videos. For your websites to be truly well designed, they need to include interactive multimedia, which isn't just the presentation but allows the user to interact with the site and have input. JavaScript allows us to have more interactive sites.
Enriching Web Pages with Videos
As a student, you have benefited from accessing "how to" videos on websites to solve math equations, apply software features, or discover how to cook a meal. Videos are used like other multimedia elements to promote the message on the website. HTML 5 has made it easier for web designers to display media files in web browsers with the use of the <video> element. Prior to HTML 5 a plug-in, such as Flash, was needed to be installed to view a video. Because HTML 5 only supports video formats indicated in the table below, web designers often use video conversion tools to convert video formats that can be viewed by users in your target audience.
|
File Format |
Description |
|---|---|
|
MP4 |
Developed by the Moving Pictures Experts Group. Supported by all HTML 5 browsers. |
|
WebM |
Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML 5. |
|
Ogg |
Developed by Xiph.org Foundation. Supported by HTML 5. |
To add video to your web page you use the <video> element. You must also use the <source> element to identify the source of the video. In addition, there are several attributes that are available to make your video appear as you'd like. Below is a list of the elements and attributes for entering video in HTML5.
|
Element |
Attribute |
Value(s) |
Effect |
|---|---|---|---|
|
<video> |
|
Inserts video into the page |
|
|
<source> |
|
Points the browser to the source of the video |
|
|
|
src |
URL |
Adds the URL for the audio file |
|
|
type |
video/mp4 video/ogg video/webm |
Enters the type of video file |
|
controls |
controls |
Adds video controls such as play, pause, stop |
|
|
width |
pixels |
Determines the width of the video |
|
|
height |
pixels |
Determines the height of the video |
|
|
autoplay |
autoplay |
Causes the video to play automatically when the page is accessed |
|
|
|
muted |
muted |
Causes the video to be muted when it first starts, until the user unmutes it |
|
|
loop |
loop |
Causes the video to start over again every time it is finished |
|
|
poster |
URL |
Puts an image over the video while the video is downloading, or until the user presses the play button |
|
|
preload |
auto metadata none |
Causes the video to be loaded when the page loads according to how the author of the page wants it. |
Watch the video below to learn how to add video to your website.
[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION