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)
17 views
8 pages
Inserting Media
Inserting- Media is a basic for the teachers
Uploaded by
alquizarlord
AI-enhanced title
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content,
claim it here
.
Available Formats
Download as PDF or read online on Scribd
Download
Save
Save Inserting-Media For Later
Share
0%
0% found this document useful, undefined
0%
, undefined
Print
Embed
Report
0 ratings
0% found this document useful (0 votes)
17 views
8 pages
Inserting Media
Inserting- Media is a basic for the teachers
Uploaded by
alquizarlord
AI-enhanced title
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content,
claim it here
.
Available Formats
Download as PDF or read online on Scribd
Carousel Previous
Carousel Next
Download
Save
Save Inserting-Media For Later
Share
0%
0% found this document useful, undefined
0%
, undefined
Print
Embed
Report
Download
Save Inserting-Media For Later
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
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
HTML - Embed Multimedia
PDF
No ratings yet
HTML - Embed Multimedia
6 pages
B6. HTML5 Audio and Video
PDF
No ratings yet
B6. HTML5 Audio and Video
23 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
Embed Multimedia
PDF
No ratings yet
Embed Multimedia
4 pages
HTML Media (Audio and Video)
PDF
No ratings yet
HTML Media (Audio and Video)
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
Chapter 2.2
PDF
No ratings yet
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
HTML Part 2 Notes
PDF
No ratings yet
HTML Part 2 Notes
8 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
Wa0004.
PDF
No ratings yet
Wa0004.
4 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
Introduction of HTML
PDF
No ratings yet
Introduction of HTML
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
Unit 3
PDF
No ratings yet
Unit 3
40 pages
Types of Questions in Reading
PDF
No ratings yet
Types of Questions in Reading
15 pages
Lec 1.2.2
PDF
No ratings yet
Lec 1.2.2
15 pages
WAD LAB Manual
PDF
0% (1)
WAD LAB Manual
96 pages
Basics of HTML Presentation
PDF
No ratings yet
Basics of HTML Presentation
5 pages
Web Design-Lecture 4-HTML
PDF
No ratings yet
Web Design-Lecture 4-HTML
26 pages
Web A
PDF
No ratings yet
Web A
15 pages
WT 3
PDF
No ratings yet
WT 3
9 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
Audio Vedio
PDF
No ratings yet
Audio Vedio
11 pages
HTML Video Tag: Browser mp3 Wav Ogg
PDF
No ratings yet
HTML Video Tag: Browser mp3 Wav Ogg
2 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
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
Internal 1
PDF
No ratings yet
Internal 1
17 pages