Open navigation menu
Close suggestions
Search
Search
en
Change Language
Upload
Sign in
Sign in
Download free for days
0 ratings
0% found this document useful (0 votes)
12 views
Inserting Media
Inserting- Media is a basic for the teachers
Uploaded by
alquizarlord
AI-enhanced title
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
Download now
Download
Save Inserting-Media For Later
Download
Save
Save Inserting-Media For Later
0%
0% found this document useful, undefined
0%
, undefined
Embed
Share
Print
Report
0 ratings
0% found this document useful (0 votes)
12 views
Inserting Media
Inserting- Media is a basic for the teachers
Uploaded by
alquizarlord
AI-enhanced title
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
Download now
Download
Save Inserting-Media For Later
Carousel Previous
Carousel Next
Save
Save Inserting-Media For Later
0%
0% found this document useful, undefined
0%
, undefined
Embed
Share
Print
Report
Download now
Download
You are on page 1
/ 8
Search
Fullscreen
LESSON 1- INSERTING MEDIA (IMAGE, VIDEO, AND MUSIC) TECH DRIV In HTMLS Multimedia, the two most popular additions are the
and
tags. Without the need of an external plug-in, such as the Flash Player, these tags enable the user to play media directly in the browser. In this lesson, we will add the HTMLS5 audio to our web page where we will use an updated browser. Let us be reminded that there are supported file formats and will vary by browser for some reasons concerning copyright. At the end of this lesson, you should be able to: * learn how to insert an image, video, and audio in HTML document; * know what are obsolete for multimedia insertion in HTML5; * understand the importance of the elements in multimedia integration; and * know the supported file formats in inserting media.TECH EXPLORE 11INSERTING AN IMAGE Images have variety of file types such as png, gif, and ,jpg. Adding images will depend on what type of image to use. It uses the img element where itis a different file inside the HTML. title>
Setting the Image Directory The element of an image has its attributes including the source attribute (src). Itindicates the kind of image the browser will read and where it is located.Example.
Image
The image source is where src=" images/dog.jpg” serves as the directory of the photo that was included inside the HTML document. This slash (/) indicates that dog jpg is inside the images folder. There can be many slashes depending on the number of subfolders where the file is stored. 1.2 WIDTH AND HEIGHT OF AN IMAGE This sets the width and height of the image that measures in pixels but we can make a percentage value for the width element. If the width and height are not declared, the browser will load the original image size. It is a good practice to specify the size of an image. Example:
Image
Itshows the way for playing a Flash format movie and the unsupported video element. 1.3 SUPPORTED VIDEO FORMATS MP4, WebM, and Ogg are the three supported video formats in HTML5. The table below shows the major browsers that support these formats. Browser | MP4 WebM | Ogg Internet Explorer [ Yes No No ‘Chrome | Yes Yes Yes Firefox | Yes Yes Yes Safari | Yes No No [Opera L__ Yes (version 25) Yes Yes Types of Media for Coding Purposes sere __ Media Types aa File Format Types [Mpa video/mp4 WebM. video/webm Ogg video/ogs, Pas Re pee ate Tag Description
This defines a video or movie.
This defines directory of the media file where itis located such as
and
.
This defines text tracks in media player.1.4BACKGROUND AUDIO The HTMLS audio is like the video tag that has an element of
and supports the embedded audio in a web page without any plug-ins. Example:
Your browser does not support the audio element.
4 The controls will stand as the control of the audio. It contains the play, pause, and volume features that can be used to manage the audio file. Just like the video attributes, audio has also the source attribute that will classify the alternative audio file where the browser will recognize the first format. To have an autoplay audio in the web page, it must have this controls autoplay loop. Example:
Your browser does not support the audio element.
. For buffering larger files of audio, the preload attribute must be used. It can handle one value such as none, auto, or metadata. If the user does not like to buffer the audio file, none is the applicable value. yaa ONS es DTTSupported Audio Formats There are three supported formats in HTMLS5, namely .mp3, .wav, and .ogg. They have different support from different browsers, Browser ae ones Internet Explorer Yes [Chrome Yes._|_Yes Firefox Yes Safari [Opera Yes Types of Media for Coding Purposes File Format es MP3 audio/mp3 Wav audio/wav Ogg audio/ogg,
| This will define an audio. This defines directory of the media file where is was located such as
and
. To organize your files, put multimedia files in a right place and avoid creating many subfolders because it can affect the speed in loading images, videos, and audio. The
tag must be placed inside the
or
, so that the validation of the web page is right. Do not forget the src attribute to indicate the file directory. It would be the only file name if the HTML file is stored together with the multimedia file. If the multimedia file is from another website, use the complete URL address. Always include the alt attribute inside the image element for the people who have visual problems and for those people who have disability viewing images for faster browsing.The
tag does not require the "/" or end tag for HTMLS5. In embedding, a flash format, the attribute inside the object tag must not be included, because it will have compatibility issues with other browsers. a H BOOSTER Classify the image, video, or audio that you want to use. Make sure the format of the file is allowed. Modify the screen size depending on the design you ‘want to build and the purpose of broadcasting the image, video, or audio. Be aware of the file format of the integrated file because it will not be thé same as the,expected output in your browser. Always see the directory of the media file to prevent loss of sources in your web page. Try to include the media files. <{DOCTYPE html>
Multimedia Files
simgore~'dog pg" alt="Jolly Dog" width="50%" height="30%">
Your browser does not support HTMLS5 video.
Your browser does not support the audio element.
You might also like
(Download PDF) New Perspectives On HTML5 CSS3 JavaScript 6th Edition Carey Solutions Manual Full Chapter
PDF
100% (22)
(Download PDF) New Perspectives On HTML5 CSS3 JavaScript 6th Edition Carey Solutions Manual Full Chapter
36 pages
Day5 Htmlmedia
PDF
No ratings yet
Day5 Htmlmedia
10 pages
HTML Multimedia
PDF
No ratings yet
HTML Multimedia
5 pages
HTML Audio Tag
PDF
No ratings yet
HTML Audio Tag
6 pages
HTML Video Audio Coding Placeholder
PDF
No ratings yet
HTML Video Audio Coding Placeholder
12 pages
B6. HTML5 Audio and Video
PDF
No ratings yet
B6. HTML5 Audio and Video
23 pages
HTML - Embed Multimedia
PDF
No ratings yet
HTML - Embed Multimedia
6 pages
Html5 Audio Video
PDF
No ratings yet
Html5 Audio Video
4 pages
Html5 Audio
PDF
No ratings yet
Html5 Audio
15 pages
7 Video
PDF
No ratings yet
7 Video
17 pages
Multimedia
PDF
No ratings yet
Multimedia
33 pages
3563 (1)
PDF
No ratings yet
3563 (1)
2 pages
HTML Videos and Audio
PDF
No ratings yet
HTML Videos and Audio
9 pages
Media Elements
PDF
No ratings yet
Media Elements
2 pages
Webdesign 8a
PDF
No ratings yet
Webdesign 8a
26 pages
4. chapter 2.2
PDF
No ratings yet
4. chapter 2.2
4 pages
Grade 8 - HTML
PDF
No ratings yet
Grade 8 - HTML
32 pages
unit-2 question and answer
PDF
No ratings yet
unit-2 question and answer
6 pages
media tags
PDF
No ratings yet
media tags
2 pages
What Is HTML5?
PDF
No ratings yet
What Is HTML5?
49 pages
Html5 Audio
PDF
No ratings yet
Html5 Audio
2 pages
Unit 2
PDF
No ratings yet
Unit 2
7 pages
Computer Applications Class 10 Chapter 5 and 6 CBSE
PDF
No ratings yet
Computer Applications Class 10 Chapter 5 and 6 CBSE
29 pages
INSY214_Chapter5
PDF
No ratings yet
INSY214_Chapter5
16 pages
Lecture 13 - HTML Embed Multimedia
PDF
No ratings yet
Lecture 13 - HTML Embed Multimedia
54 pages
HTML Multimedia Tags
PDF
No ratings yet
HTML Multimedia Tags
16 pages
Lecture 6
PDF
No ratings yet
Lecture 6
27 pages
lecture03_wt_html_images_audio_and_video
PDF
No ratings yet
lecture03_wt_html_images_audio_and_video
44 pages
Myperttext markup language Multimedia-files
PDF
No ratings yet
Myperttext markup language Multimedia-files
7 pages
Unit 6 Read Me
PDF
No ratings yet
Unit 6 Read Me
4 pages
HTML 5
PDF
No ratings yet
HTML 5
12 pages
Lesson 2.1
PDF
No ratings yet
Lesson 2.1
14 pages
9.HTML Media
PDF
No ratings yet
9.HTML Media
12 pages
Types of questions in reading
PDF
No ratings yet
Types of questions in reading
15 pages
WAD LAB Manual
PDF
0% (1)
WAD LAB Manual
96 pages
Web Design-Lecture 4-HTML
PDF
No ratings yet
Web Design-Lecture 4-HTML
26 pages
WT 3
PDF
No ratings yet
WT 3
9 pages
Web A
PDF
No ratings yet
Web A
15 pages
Midterm - Current Trends
PDF
No ratings yet
Midterm - Current Trends
6 pages
Image Maps
PDF
No ratings yet
Image Maps
11 pages
Lecture 5 Images and Sound
PDF
No ratings yet
Lecture 5 Images and Sound
32 pages
AudioVedio (1)
PDF
No ratings yet
AudioVedio (1)
11 pages
Images and Multimedia
PDF
No ratings yet
Images and Multimedia
3 pages
Unit-3.14 HTML5-New-Aside-Audio-Video
PDF
No ratings yet
Unit-3.14 HTML5-New-Aside-Audio-Video
37 pages
Computer 7 2nd Term Session 5
PDF
No ratings yet
Computer 7 2nd Term Session 5
3 pages
Creating An HTML Document
PDF
No ratings yet
Creating An HTML Document
24 pages
Tutorial HTML 5 in English
PDF
No ratings yet
Tutorial HTML 5 in English
51 pages
HTML5 Media 1st Edition Kevin Martin instant download
PDF
100% (1)
HTML5 Media 1st Edition Kevin Martin instant download
52 pages
New Doc 20-Jul-2021 10.26 Am
PDF
No ratings yet
New Doc 20-Jul-2021 10.26 Am
14 pages
Using Multimedia Elements
PDF
No ratings yet
Using Multimedia Elements
35 pages
audio-video-tag css
PDF
No ratings yet
audio-video-tag css
2 pages
Download the updated New Perspectives on HTML5 CSS3 JavaScript 6th Edition Carey Solutions Manual (PDF) containing all chapters.
PDF
100% (3)
Download the updated New Perspectives on HTML5 CSS3 JavaScript 6th Edition Carey Solutions Manual (PDF) containing all chapters.
52 pages
Internal 1
PDF
No ratings yet
Internal 1
17 pages
Chapter 7 Working With Multimedia
PDF
No ratings yet
Chapter 7 Working With Multimedia
91 pages
Images, Audio & Videos
PDF
No ratings yet
Images, Audio & Videos
30 pages
Definitions of HTML Tags
PDF
No ratings yet
Definitions of HTML Tags
3 pages
PDF New Perspectives on HTML5 CSS3 JavaScript 6th Edition Carey Solutions Manual download
PDF
100% (12)
PDF New Perspectives on HTML5 CSS3 JavaScript 6th Edition Carey Solutions Manual download
48 pages
WT Unit 1 Second Part
PDF
No ratings yet
WT Unit 1 Second Part
22 pages