Using HTML5 <video> and </video> tag pairs within a web page.
Adding video controls and Saving video files.
Streaming versus downloaded video and supporting older browsers.
Using HTML5 <audio> and </audio> tag pairs.
Adding audio controls and Saving audio files.
Making audio files work with older browsers.
HTML <div></div> Element
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements which is then styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag.
By default, browsers always place a line break before and after the <div> element.
HTML <span></span> Element
The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
HTML <div></div> and <span></span> pairs
<head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1"/><title>DIV Tag</title><styletype="text/css">div{font-family: Verdana;text-align: justify;}span{font-style: italic;color:red;}</style></head><body><div><p> The <span>div Tag</span> defines a division or a section in an HTML document.
The div tag is used as a container in HTML elements - which is then styled
with CSS or manipulated with JavaScript.
</p><p> The div tag is easily styled by using the class or id attribute. Any sort of
content can be put inside the div tag!
</p><p> Note: By default, browsers always place a line break before and after the div
element.
</p></div></body>
HTML Multimedia
Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
HTML Video
The HTML <video> and </video> element is used to show a video on a web page.
The <source> and </source> element allows you to specify alternative video files from which the browser may choose. Using this element the browser will use the first recognized format.
The controls attribute adds video controls, like play, pause, and volume.
The muted attribute on a media element mutes the audio or video player. With the use of muted attributes, the video can be played, but without a sound.
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
The loop attribute will make the audio file play over and over again.
<body><audiocontrolsautoplayloop><sourcesrc="pasilyo.mp3"type="audio/mp3"> Pasilyo by Sun Kissed
</audio></body>
Common HTML Audio formats
Format
File Extension
Description
WAV
.wav
Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems.
OGG
.ogg
Developed by the Xiph.org Foundaion.
MP3
.mp3
MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality.
MP4
.mp4
MP4 is a video format, but can also be used for audio.