APIV - Video Usage in Web Design Lesson

 

Video Usage in Web Design Lesson

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. 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	Effect
<video>		Inserts video into the page
<source>		Points the browser to the source of the video
	controls	Adds video controls such as play, pause, stop
	width	Determines the width of the video
	height	Determines the height of the video
	autoplay	Causes the video to play automatically when the page is accessed*

*Autoplay may not work on some iPhones, iPads and Chromium-based browsers

Video Uses

Videos are used like other multimedia elements to promote the message on the website. Joshua shares some of those uses below.

 

Click here to visit a tutorial on HTML Video. Links to an external site.

IMAGES CREATED BY GAVS