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
- A Guide to SQL Query Formatting
- A/B testing
- Agile
- Algorithm
- Algorithm complexity in 5 minutes
- Algorithms and Data Structures in C#
- An overview of the C # programming language
- An overview of the Python programming language
- Anaconda Python
- Android
- Android App Bundle
- Android SDK
- Angular
- Ansible
- Apache
- Apache Airflow
- Apache Kafka
- Apache Tomcat
- App Store
- AppCode
- Applications of microcontrollers: From simple circuits in electronics to complex systems
- Applications of the derivative
- Arduino: How to Program It: Basics for Beginners
- Array-based stack
- ArrayList
- ASCII
- ASP.NET
- Assembly Language Lessons
B
C
D
- Data Analytics: applications of data analysis in companies
- Data Engineer - Who is it, what does a data engineer do, and an overview of the profession
- Data modeling: what it is, types, and process steps.
- Data preprocessing: a complete guide for beginners and professionals.
- Data structure
- Data structures
- Deep Learning
- Defining Aliases
- Defining Arrays
- Deque
- Developing a Website from Scratch
- Differential Equations
- Differentiation of functions
- Digital data: understand the importance of this asset for businesses.
- Double integrals
- Doubly linked lists
E
F
H
- Handling errors and exceptions
- How to effectively organize your workflow
- How to Learn Java: Tips for Beginner Developers
- How to Learn PHP: A Beginner's Guide
- How to Use S3 Storage in Kubernetes with CSI
- HTML
- HTML and CSS: Definition, Application, and Operating Principles
- HTML and CSS. Layout from Scratch: What to Learn, Where to Learn, and How Long Will It Take?
- HTML Frame Structure
- HTML Link Formatting
I
- if..else construction
- Infinite sequences and series
- Inheritance in Java: A Complete Guide to Principles and Implementation
- Inserting an Image
- Integration of functions
- Interactive Python Tutorial – Learn Programming from Scratch
- Interview Problem: Finding a Deleted Element in O(N)
- Interview Scare: The FizzBuzz Challenge
- Introduction to C++
- Introduction to Machine Learning
- Introduction to programming languages
- IT Specialist Resume (CV)
J
K
M
- Machine Learning
- Machine Learning Basic Tool: NumPy
- Machine Learning Basic Tool: Pandas
- Machine Learning Mathematics
- Microcontroller and Microprocessor - what's the difference?
- ML Engineer: Who They Are, What They Do, How Much They Earn, and How to Become a Neural Network Specialist
- Monte Carlo Simulation: How It Works and What It's For
O
P
- PHP lessons
- Private DNS server and its configuration
- Programmer's Dictionary
- Programming with pseudocode
- Python Code Formatting Guide: PEP8
- Python for data analysis: how to do it and main libraries
- Python Lessons
- Python Superstar: 5 Ways to Use the * Operator
- Python vs. Julia: Should You Replace Python with Julia?
R
S
- SFML Graphics Library Tutorials
- Sorting Algorithms in Programming: Types, Descriptions, and Comparisons
- SQL commands: see what they are, what the main ones are + examples
- SQL Interview Questions and Tasks
- SQL Lessons
- SQL Stored Procedures
- SQL Syntactic Sugar: The COALESCE Function
- Stack
- Start in analytics: Python or R
- Statistical analysis: importance for decision making.
- String formatting in Python
- Swift Lessons
- switch/match construct
T
W
- What are databases, and why do they need DBMS and SQL?
- What do Linux distributions consist of?
- What is .NET and what is it used for?
- What is a GPU in a computer, in simple terms?
- What is Arduino: How it Works and the Platform's Capabilities
- What is Big Data? Introduction, Types, Characteristics, and Examples
- What is Golang and what is it used for?
- What is Haskell and what is it used for?
- What is Kotlin and what is it used for?
- What is Linux? The History of Linux
- What is machine learning, and how does it work?
- What is Power BI: everything about the data analytics software
- What is the C++ programming language?
- What is the OSI Model: A Complete Explanation of the Seven Layers and Their Role in Networking
- What's the difference between x86 and ARM processors?
- Where to start learning the C programming language?
- Which Linux distribution should you choose? A Linux distribution overview