checkmark

HTML

Introduction to Web and HTML

How the Web Works What is HTML Why Learn HTML

HTML Basics

HTML Structure and Syntax HTML Tags HTML Elements HTML Attributes Anatomy of an HTML Document Creating Your First HTML Page

HTML Document Structure

Document Type Declaration (<!DOCTYPE>) The `<html>` Element The `<head>` Section The `<meta>` Element The `<title>` Element The `<body>` Element HTML Comments

Text Formatting

Headings (<h1> to <h6>) Paragraphs (`<p>`) Line Breaks (`<br>`) Text Formatting Tags Preformatted Text (`<pre>`)

Lists

Unordered Lists (<ul> and <li>) Ordered Lists (<ol> and <li>) Definition Lists (<dl>, <dt>, and <dd>)

Links

Anchor Tags (<a>) Internal Links in html External Links in html Links to Email Addresses Linking to Other Resources Link Target Attributes Image Links

Images

Inserting Images (<img>) Image Attributes Image Formats (JPEG, PNG, GIF) Image Size and Alignment Image Maps

HTML Forms

HTML Form Structure Text Fields and Textareas Radio Buttons and Checkboxes Dropdowns / Select Box Text, Password, and Email Inputs in HTML Forms Date and Time Inputs in HTML Forms Submit and Reset Buttons Form Elements Attributes Form Validation Grouping Form Elements File Uploads Creating a Contact Form

Tables

Table Structure Table Rows and Columns Table Headers Table Data Table Captions Table Borders and Styling Spanning Rows and Columns

Multimedia

Embedding Audio (<audio>) Embedding Video (<video>) Video Formats (MP4, WebM, Ogg) Multimedia Attributes

HTML5 Sematic Elements

HTML5 Structural Elements Role of Semantic Elements Accessibility and SEO

HTML Entities

Special Characters and Symbols Common HTML Entities
menu Back to Edkool

Video Formats (MP4, WebM, Ogg)

Video Formats in HTML

When embedding videos in your HTML documents, it's essential to consider various video formats to ensure compatibility across different browsers and devices. The most common video formats used in web development are MP4, WebM, and Ogg.

MP4 (H.264)

MP4, also known as H.264, is a widely supported video format. It is compatible with most modern browsers, including Chrome, Firefox, Safari, and Internet Explorer. MP4 videos offer excellent video quality and compression, making them a popular choice for web video content.

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

WebM

WebM is an open and royalty-free video format developed by Google. It offers efficient video compression and is supported by many browsers, including Chrome, Firefox, and Opera. It's a great choice for web videos when you want to reach a broad audience.

<video controls>
  <source src="video.webm" type="video/webm">
  Your browser does not support the video element.
</video>

Ogg (Ogg Theora)

Ogg, specifically Ogg Theora, is an open and royalty-free video format suitable for web video content. It is supported by some browsers, including Firefox. While not as widely supported as MP4 and WebM, Ogg remains an option for providing video content to users who prefer open formats.

<video controls>
  <source src="video.ogv" type="video/ogg">
  Your browser does not support the video element.
</video>

Providing Multiple Formats

To ensure compatibility with a broader range of browsers, it's a good practice to provide video content in multiple formats. You can do this by including multiple <source> elements within your <video> element.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  Your browser does not support the video element.
</video>

By offering multiple formats, you increase the likelihood that users can access your video content without compatibility issues.

Video Conversion

You can use various video conversion tools and software to create videos in these different formats. Popular video editors and converters often include options to export videos in MP4, WebM, and Ogg formats.

In summary, understanding the common video formats, such as MP4, WebM, and Ogg, is crucial when embedding videos in your HTML documents. Providing multiple formats ensures that your video content is accessible to a wide audience, regardless of the browser or device they use.

Previous Embedding Video (<video>)
Next Multimedia Attributes