Multimedia | HTML

#	Content	Views
1.	Tutorial Tags	37,061
2.	Tutorial + Programming	1,062,138
3.	Videos	353,316
4.	Results (`Annual + Re-appear`)	44,967
5.	Quiz Chapters	37,147
6.	Quiz Questions	540,385
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,246
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,500
13.	Downloads (Syllabus)	2,638

Home
HTML
Multimedia

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

#HTML #multimedia #video

Video Autoplay

To start a video automatically, use the autoplay attribute:

<!DOCTYPE html> 
<html> 
<body> 

<video width="320" height="240" autoplay>
  <source src="/html/videos/eWordIcon.mp4" type="video/mp4">
  <source src="/html/videos/eWordIcon.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

<p>Video URL » » <a href="https://www.youtube.com/watch?v=3lOjNDvVeZA" target="_blank" style="text-decoration:none";>ICON | e-Word of the Week | 9th Class | 2022-23 | Computer Science</a>.
</p>

</body> 
</html>

Live Demo & Try it yourself!

#HTML #multimedia #video #autoplay

Muted video after autoplay

<!DOCTYPE html> 
<html> 
<body> 

<video width="320" height="240" autoplay muted>
  <source src="/html/videos/eWordIcon.mp4" type="video/mp4">
  <source src="/html/videos/eWordIcon.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

<p>Video URL » » <a href="https://www.youtube.com/watch?v=3lOjNDvVeZA" target="_blank" style="text-decoration:none";>ICON | e-Word of the Week | 9th Class | 2022-23 | Computer Science</a>.
</p>

</body> 
</html>

Live Demo & Try it yourself!

#HTML #video #autoplay #muted

Video - Methods, Properties, and Events

The HTML DOM defines methods, properties, and events for theelement. This allows you to load, play, and pause videos, as well as setting duration and volume. There are also DOM events that can notify you when a video begins to play, is paused, etc.

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br><br>
  <video id="video1" width="420">
    <source src="/html/videos/eWordIcon.mp4" type="video/mp4">
    <source src="/html/videos/eWordIcon.mp4" type="video/ogg">
    Your browser does not support HTML video.
  </video>
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function playPause() { 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 560; 
} 

function makeSmall() { 
    myVideo.width = 320; 
} 

function makeNormal() { 
    myVideo.width = 420; 
} 
</script> 

<p>Video URL » » <a href="https://www.youtube.com/watch?v=3lOjNDvVeZA" target="_blank" style="text-decoration:none";>ICON | e-Word of the Week | 9th Class | 2022-23 | Computer Science</a>.</p>


</body> 
</html>

Live Demo & Try it yourself!

HTML Video - Media Types

File Format	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML Video Tags

Tag	Description
<video>	Defines a video or movie
<source>	Defines multiple media resources for media elements, such as <video> and <audio>
<track>	Defines text tracks in media players

#HTML #big #multimedia #video #play #pause #normal #small

audio Element

To play an audio file in HTML, use the <audio> element:

<!DOCTYPE html>
<html>
<body>
<h2>Audio Element</h2>
<audio controls>  
  <source src="/html/audio/audio_song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

Live Demo & Try it yourself!

HTML Audio - How It Works

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

#HTML #multimedia #audio

Audio Autoplay

To start an audio file automatically, use the autoplay attribute:

<!DOCTYPE html>
<html>
<body>
<h2>Audio Element - Autoplay</h2>
<audio controls autoplay>
  <source src="/html/audio/audio_song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

Live Demo & Try it yourself!

#HTML #multimedia #autoplay #audio

Muted Audio after autoplay

Add muted after autoplay to let your audio file start playing automatically (but muted):

<!DOCTYPE html>
<html>
<body>
<h2>Audio Element - Autoplay and muted</h2>
<audio controls autoplay muted>
  <source src="/html/audio/audio_song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

Live Demo & Try it yourself!

HTML Audio - Methods, Properties, and Events

The HTML DOM defines methods, properties, and events for the <audio> element.

This allows you to load, play, and pause audios, as well as set duration and volume.

There are also DOM events that can notify you when an audio begins to play, is paused, etc.

HTML Audio - Media Types

File Format	Media Type
MP3	audio/mpeg
OGG	audio/ogg
WAV	audio/wav

HTML Audio Tags

Tag	Description
<audio>	Defines sound content
<source>	Defines multiple media resources for media elements, such as <video> and <audio>

#HTML #multimedia #autoplay #muted #audio

object Element

Plug-ins

Plug-ins were designed to be used for many different purposes:

To run Java applets
To run Microsoft ActiveX controls
To display Flash movies
To display maps
To scan for viruses
To verify a bank id

Warning !

Most browsers no longer support Java Applets and Plug-ins.

ActiveX controls are no longer supported in any browsers.

The support for Shockwave Flash has also been turned off in modern browsers.

The <object> element is supported by all browsers.

The <object> element defines an embedded object within an HTML document.

It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in web pages, but can also be used to include HTML in HTML:

<!DOCTYPE html>
<html>
<body>
<h2>Object Element with File</h2>
<object width="100%" height="300px" data="/html/studentsTable.html"></object>
 
</body>
</html>

Live Demo & Try it yourself!

#HTML #multimedia #objects #Plug-ins

Object Element with images

We can use object element with images.

<!DOCTYPE html>
<html>
<body>
<h2>Object Element with Image</h2>

<object data="/images/cat.jpg"></object>
 
</body>
</html>

Live Demo & Try it yourself!

#HTML #image #multimedia #objects #Plug-ins

embed Element

The <embed> element is supported in all major browsers.

The <embed> element also defines an embedded object within an HTML document.

Web browsers have supported the <embed> element for a long time. However, it has not been a part of the HTML specification before HTML5.

<!DOCTYPE html>
<html>
<body>
<h2>Embed Element with File</h2>
<embed width="100%" height="350px" src="/html/studentsTable.html">

</body>
</html>

Live Demo & Try it yourself!

#HTML #multimedia #Plug-ins #embed

embed Element with images

<!DOCTYPE html>
<html>
<body>
<h2>embed Element with Image</h2>

<embed src="/images/cat.jpg">
 
</body>
</html>

Live Demo & Try it yourself!

#HTML #image #multimedia #Plug-ins #embed

HTML Home

- Home

HTML Introduction

- Introduction

HTML Editors

- Editors

HTML Basic

- Basic

HTML Heading

- Heading

HTML Formatting

- Formatting

HTML Styles

- Styles

HTML Comments

- Comments

HTML Colors

- Colors

HTML CSS

- CSS

HTML Lists

- Unordered List

- Ordered List

- Definition List

HTML Tables

- Tables

- Table Borders

- Table CSS Border

- Table Sizes

- Table Headers

- Table Styling

- Table Colgroup

HTML Images

- Images

- Image Maps

- Background Images

- Picture Element

HTML Favicon

- Favicon

HTML Links

- Links

- Link Colors

- Bookmarks

HTML Page Title

- Page Title

HTML Block and Inline Elements

- Block-level Elements

HTML Head

- title Element

- style Element

- link Element

- meta Element

- The Viewport

- script Element

- base Element

HTML Quotation and Citation Elements

- blockquote

- citation element

HTML Class Attribute

- Class Attribute

HTML id Attribute

- id Attribute

HTML Iframes

- iframes

HTML JavaScript

- JavaScript

HTML Layout

- Layout

HTML Responsive

- Responsive

- Responsive Images

- Responsive Text Size

HTML Semantic

- Semantic Elements

HTML Style Guide

- Style Guide

HTML Symbols

- Symbol

HTML Emojis

- Emojis

HTML Charset

- Charset

HTML Forms

- Forms

- Form Element

- Form Attributes

- Form Elements

- Input Types

- Input Attributes

- Input form Attributes

HTML Graphics

- Canvas

- SVG Graphics

HTML Multimedia

- Video

- Audio

- Plug-ins

HTML Social Media

- YouTube

- Facebook

- Instagram

- Dailymotion

Video Element

Video Element

How it Works

Video Autoplay

Video Autoplay

Muted video after autoplay

Muted video after autoplay

Video - Methods, Properties, and Events

Video - Methods, Properties, and Events

HTML Video - Media Types

HTML Video Tags

audio Element

audio Element

HTML Audio - How It Works

Audio Autoplay

Audio Autoplay

Muted Audio after autoplay

Muted Audio after autoplay

HTML Audio - Methods, Properties, and Events

HTML Audio - Media Types

HTML Audio Tags

object Element

object Element

Plug-ins

Object Element with images

Object Element with images

embed Element

embed Element

embed Element with images

embed Element with images

HTML

HTML Tags

Examples