HTML Tutorials

#	Content	Views
1.	Tutorial Tags	15,844
2.	Tutorial + Programming	678,587
3.	Videos	218,835
4.	Results (`Annual + Re-appear`)	12,704
5.	Quiz Chapters	14,622
6.	Quiz Questions	172,789
7.	Quiz Results	18,822
8.	Testimonials	3,462
9.	Projects	28,286
10.	e-Words	12,023
11.	e-Certificates	4,968
12.	Downloads (Softwares)	4,238
13.	Downloads (Syllabus)	949

Video Element

The HTML <video> element is used to show a video on a web page.

<!DOCTYPE html> 
<html> 
<body> 

<video width="350" controls>
  <source src="/html/videos/eWordIcon.mp4" type="video/mp4">
  <source src="/html/videos/eWordIcon.ogg" type="video/ogg">
  Your browser does not support HTML video.
</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

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!