Embedding Video on a Website
Jump to Section:
HTML Lesson 8: Embedding Video on a Website
Lesson Objective: How to embed video and audio in HTML and file formats
Insert audio
Audio file formats:
- mp3 and mp4
- wav
- ogg
To embed an audio player, use the following code:
<audio controls = "controls" > <source src = "song.ogg" type = "audio/ogg" > <source src = "song.mp3" type = "audio/mpeg" > < / audio> |
In the Google Chrome browser, the player will look like this:
<audio> Player tag attributes :| Attribute | Meaning | Description |
|---|---|---|
| autoplay | autoplay | Specifies that the audio should start playing as soon as it is ready. |
| controls | controls | Specifies that playback controls should be displayed. |
| loop | loop | Specifies that the audio should restart when it finishes. |
| preload | auto metadata none | Determines whether the audio should be loaded when the page loads. |
| src | URL | Specifies the address of the audio to play. |
Other options for embedding audio on your website
<a href = "filename.mp3" > Click < / a > |
<bgsound src = "04.wav" loop = "5" > |
*only for formats: wav, mp3, aiff, wma
<embed src = "filename.wav" height = "150" width = "180" > |
Embed video
Video file format:
- MP4
- WebM
- Ogg
<video width = "320" height = "240" controls = "controls" poster = "logo.png" > <source src = "movie.mp4" type = "video/mp4" > <source src = "movie.ogg" type = "video/ogg" > Your browser does not support video. < / video> |
Result in browser:
<video> Player tag attributes :| Attribute | Meaning | Description |
|---|---|---|
| audio | muted | Specifies the default sound state. Currently, only “muted” is allowed. |
| autoplay | autoplay | If specified, the video will start playing as soon as it is ready. |
| controls | controls | If specified, control buttons will be shown, such as the play button. |
| height | pixels | Specifies the height of the video player. |
| loop | loop | If specified, the video will start playing again once it finishes. |
| poster | URL | Specifies the URL of an image representing the video. |
| preload | auto metadata none | If specified, the video will be loaded when the page loads and is ready to play. Ignored if “autoplay” is specified. |
| src | URL | URL address of the video to play |
| width | pixels | Specifies the width of the video player. |
Example:
<video src = "04.avi" loop = "loop" audio = "muted" > |
Another option for inserting video (without a player):
<a href = "filename.avi" > Click to watch < / a> < !-- Example: -- > <a href = "ocean.qt" > 1 MB video clip < / a > |
* for MPEG, AVI formats
Favicon
A favicon appears in the browser’s address bar before the page’s URL. You can also see the favicon in the page’s browser tab. Search engines display the favicon along with their search results.
- files with the .ico extension,
- size 16×16 pixels
Service for conversion to ICO format: http://image.online-convert.com/
< html > < head > < link rel = "icon" href = "favicon.ico" type = "image/x-icon" > < / head > |
HTML 5: Semantic Tags
- Semantic tags typically carry semantic meaning and have no external HTML formatting. However, they can and should be styled with CSS. These tags are important for code readability and influence search engine rankings.
- Let’s look at examples of semantic tags and their use:
<!doctype html> < html > < head > < meta charset = "utf-8" > < title > Heading < / title > < / head > < body > <header> The header element contains information that appears as the site's title. This is usually a company logo and sometimes additional site navigation. <nav> nav (short for navigation) element - typically represents a horizontal menu for navigating to specific parts of a website. < / nav > < / header> <h1> Main page heading < / h1 > <section> Section 1 <article> Article 1 < / article> <article> Article 2 < / article> <article> Article 3 < / article> < / section> <section> Section 2 <article> Article 4 < / article> <article> Article 5 < / article> <article> Article 6 < /article> <div> Regular div , block element < / div > < / section > <aside> ASIDE - some information related to the topic of the page. < / aside> <footer> 365education.org, Copyright 2026 </footer> </body> </html> |
Assignment: Format sections of your completed essay or coursework on a web page using semantic tags. Chapters are tags
section, and subchapters are tags article. Don’t insert large sections of text; several paragraphs per subsection are sufficient. All semantic tags must be used.Explore More IT Terms
A
B
C
D
E
F
H
K
W
- What are databases, and why do they need DBMS and SQL?
- What do Linux distributions consist of?
- What is a GPU in a computer, in simple terms?
- What is Linux? The History of Linux
- What is the OSI Model: A Complete Explanation of the Seven Layers and Their Role in Networking
- Which Linux distribution should you choose? A Linux distribution overview