Web Page Design- Content Analysis
wostinabin2
Week8-Lectureslides-20200617.zipChapter 09.pptx
WPDD202: Webpage Design & Development
Version 2 – 18th December 2015
Kent Institute Australia Pty. Ltd.
ABN 49 003 577 302 CRICOS Code: 00161E RTO Code: 90458 TEQSA Provider Number: PRV12051
1
Resource Material
Web Design with HTML & CSS3: Comprehensive, 8th Edition
Jessica Minnick; Lisa Friedrichsen
ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017
Cengage Learning Australia
2
2
Chapter 9
Integrating Audio and Video
3
Chapter Objectives
Describe the benefits and limitations of multimedia in websites
Identify audio formats
Identify video formats
Describe a plug-in
Understand codecs
Understand and create audio elements
Chapter 9: Integrating Audio and Video
4
Chapter Objectives (continued)
Understand and create video elements
Identify common audio attributes
Identify common video attributes
Understand the source element
Test audio elements
Test video elements
Chapter 9: Integrating Audio and Video
5
Using Multimedia
Multimedia – It is the fusion of text, images, sound, and video to exhibit an idea or convey a message
Many websites use videos to publicize products, to please visitors, or to provide instruction
Chapter 9: Integrating Audio and Video
6
Using Multimedia (continued 1)
Chapter 9: Integrating Audio and Video
7
Using Multimedia (continued 2)
Podcasts – They are a series of audio or video clips released in a sequence and are popular in home, academic, and corporate settings
Chapter 9: Integrating Audio and Video
8
Using Multimedia (continued 3)
Chapter 9: Integrating Audio and Video
9
Creating Multimedia Files
One can obtain multimedia files by creating them or finding files that are already available
Audio files can be created using:
a microphone
a software designed to edit digital files, such as Audacity
a free, open-source audio editor
Adobe Audition, which can be purchased as part of the Adobe Creative Cloud
Chapter 9: Integrating Audio and Video
10
Creating Multimedia Files (continued 1)
In order to use any portion of files that have been professionally developed, the copyright and licensing requirements must be understood and followed
Video files can be created using a digital camcorder, a digital camera, or even a smartphone to create clips that can be included on a webpage
To find multimedia resources on the web that are available free of copyright restrictions, search for “public domain audio or video”
Chapter 9: Integrating Audio and Video
11
Creating Multimedia Files (continued 2)
Chapter 9: Integrating Audio and Video
12
Embedded vs. External Multimedia
Embedded Multimedia
The embedded media files appear within the webpage along with the audio or video player controls
Visitors use the controls to play or stop the media
External Multimedia
The external media is displayed out of context with the webpage that contains the link
Website visitors click a link to access external media files
13
Chapter 9: Integrating Audio and Video
Embedded vs. External Multimedia (continued 1)
Embedding media is similar to inserting inline images
Prior to HTML5, the object element was used to insert embedded content, including multimedia
Two new elements introduced by HTML5, audio and video, can be used as an alternative to the object element
Chapter 9: Integrating Audio and Video
14
Embedded vs. External Multimedia (continued 2)
Using external links is a common web development practice
For example, sites that provide video resources, such as YouTube, use external media files and the embed element, which defines a container for an external application or interactive content (also called a plug-in)
Chapter 9: Integrating Audio and Video
15
Media Players and Plug-Ins
Media player – A computer software that is used to play multimedia files
Plug-in – An extra software added to browsers (or other programs) to provide a capability that is not inherent to the browser
Plug-in is also called an add-in or add-on
For embedded media files to work in a browser, website visitors need to have the correct plug-in
Chapter 9: Integrating Audio and Video
16
HTML5 and Multimedia
Built-in media support is introduced in HTML5 through the audio and video elements
Web developers can easily embed media into HTML documents using the audio and video elements
Chapter 9: Integrating Audio and Video
17
Flash
Flash, or Adobe Flash, has been used within websites for approximately 20 years
It can be used to create animations or movie files
Flash files require the browsers to have a Flash plug-in and end with the .swf file extension
Since the iOS operating system does not support flash, web developers have embraced JavaScript to incorporate additional interactivity within their websites
Chapter 9: Integrating Audio and Video
18
Java Applets
Java applet – A small program created with Java, a programming language
If browsers have installed and enabled Java, Java applets can be embedded within a webpage
The use of Java applet in today’s modern websites is deteriorating
Chapter 9: Integrating Audio and Video
19
Object Element
The HTML object element is used to embed multimedia objects such as Flash files, Java applets, PDF files, and ActiveX controls
The param element is used to define parameters for plug-ins embedded with an object element
Chapter 9: Integrating Audio and Video
20
Object Element (continued)
The following is an example of the object element
<object data="audio.wav">
<param name="autoplay" value="true">
</object>
In this example, an audio file named audio.wav is embedded on the webpage
The autoplay parameter is set to true, meaning the audio starts playing when the webpage opens
Chapter 9: Integrating Audio and Video
21
Integrating Audio
Audio blended within a webpage should have a definite purpose and should provide added value or instruction
The time taken for a browser to load the audio file should also be considered
One favored way that websites use audio is to provide links to music files that visitors can play or download
Chapter 9: Integrating Audio and Video
22
Audio File Formats
The three audio file formats supported by the HTML5 audio element are .mp3, .ogg, and .wav
Audio converter software can be used to convert files from one audio format to a supported format
File compression techniques are used to reduce the size of the audio files for the web, though they can also diminish the sound quality
Chapter 9: Integrating Audio and Video
23
Audio File Formats (continued)
Chapter 9: Integrating Audio and Video
24
File Compression and Codecs
Codec – A compression technology used to compress images, audio, and video files
The word codec is short for code/decode because it consists of an encoder, which compresses the file, and a decoder, which decompresses the file
Although the page load time is improved using codecs, compressing a media file too much leads to loss of sound quality
Chapter 9: Integrating Audio and Video
25
HMTL5 audio Element
The audio element is used to define sound, such as music or other audio streams
Text content should be inserted between the <audio> and </audio> tags because browsers that do not support the audio element ignore the <audio> tag to alert users
Chapter 9: Integrating Audio and Video
26
26
HMTL5 audio Element (continued 1)
Chapter 9: Integrating Audio and Video
27
HMTL5 audio Element (continued 2)
Chapter 9: Integrating Audio and Video
28
HMTL5 audio Element (continued 2)
<audio controls> <source src=“aud1.ogg" type="audio/ogg"> <source src=“aud1.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
Chapter 9: Integrating Audio and Video
29
Video File Formats
The three video file formats supported by the HTML5 video element are .mp4, .ogg, and .webm
Video converter software can be used to convert an unsupported video file format to a supported format
Chapter 9: Integrating Audio and Video
30
Video File Formats (continued)
Chapter 9: Integrating Audio and Video
31
HTML5 video Element
Three HTML elements can be used to incorporate videos in a webpage: embed, object, and video
The embed element is used to embed multimedia elements in HTML pages
If Flash is not supported by browsers, the video specified in the embed element will not play
Chapter 9: Integrating Audio and Video
32
Using the video Element
Chapter 9: Integrating Audio and Video
33
Using the video Element (continued 1)
Text content should be inserted between the <video> and </video> tags because browsers that do not support the video element ignore the <video> tag to alert users
The following sample code shows how to use the video element to insert a video file named advertisement.mp4 in a webpage
Chapter 9: Integrating Audio and Video
34
Using the video Element (continued 2)
<video width="320" height="240" controls="controls">
<source src="advertisement.mp4" type="video/mp4">
<p>Your browser does not support the HTML5 video element.</p>
</video>
In the above example, the code sets the dimensions of the video (320 pixels by 240 pixels) and displays the playback controls
Chapter 9: Integrating Audio and Video
35
Using the video Element (continued 3)
If the browser does not support the video element, the user is alerted
The controls attribute adds video controls including play, pause, and volume
The video element allows multiple source elements, which can link to different video files
Chapter 9: Integrating Audio and Video
36
Using the video Element (continued 4)
Chapter 9: Integrating Audio and Video
37
To Add Video to the About Us Page
Chapter 9: Integrating Audio and Video
38
To Style the Video
Chapter 9: Integrating Audio and Video
39
To Validate the Style Sheet
New webpage files should always be run through W3C’s validator to check the document for errors
Validating helps to identify and correct errors in a document
Validation acts as an effective troubleshooting tool during the development process
Validation adds a valuable level of professionalism to the work
Chapter 9: Integrating Audio and Video
40
kent.edu.au Kent Institute Australia Pty. Ltd. ABN 49 003 577 302 ● CRICOS Code: 00161E ● RTO Code: 90458 ● TEQSA Provider Number: PRV12051
41
41
