HTML <video> Tag

#	Content	Views
1.	Tutorial Tags	15,838
2.	Tutorial + Programming	678,586
3.	Videos	218,835
4.	Results (`Annual + Re-appear`)	12,703
5.	Quiz Chapters	14,622
6.	Quiz Questions	172,787
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

Dailymotion Video and Image

2,619
Try it

<!DOCTYPE html>
<html>
<body>
<h2>dailymotion Video</h2> 
<h4>Embed dailymotion video into HTML/Web site</h4>

<iframe src="https://www.dailymotion.com/thumbnail/video/x6zmog4" width="500" height="281"></iframe>    

<hr>
<h4>Fetch dailymotion video's image and display on HTML/Web site</h4>

<img src="https://www.dailymotion.com/thumbnail/video/x6zmog4"  class="img-ForVideo">
</body>
</html>

Live Demo & Try it yourself!

Read More » »

#HTML #image #multimedia #video #social media #dailymotion

Instagram Video

2,619
Try it

if you're facing "Sorry, this page isn't available" then you need to login in instagram

<!DOCTYPE html>
<html>
<body>
<h2>Instagram Video</h2> 

<iframe src="https://www.instagram.com/p/CtD-vtYg0_7" width="500" height="281"></iframe>

<p>if you're facing "Sorry, this page isn't available" then you need to login in instagram</p>
<hr>

<p>Same you can fetch image from Instagram's Video's</p>

<img src="https://www.instagram.com/p/CtD-vtYg0_7">

</body>
</html>

Live Demo & Try it yourself!

Read More » »

#HTML #Instagram #multimedia #video #social media

Fetch Image from YouTube's Video

2,619
Try it

<!DOCTYPE html>
<html>
<body>
<h2>Fetch Image from YouTube's Video</h2> 

<img src="http://img.youtube.com/vi/3lOjNDvVeZA/mqdefault.jpg" class="img-ForVideo">

</body>
</html>

Live Demo & Try it yourself!

Read More » »

#HTML #YouTube #image #multimedia #video #social media

Facebook Video

2,619
Try it

<!DOCTYPE html>
<html>
<body>
<h2>Facebook Video</h2> 

<iframe src="https://www.facebook.com/plugins/video.php?href=https://www.facebook.com/watch/?v=821698172715949&width=500&show_text=false&height=281" width="500" height="281" style="border:none;overflow:hidden" scrolling="no"></iframe>

</body>
</html>

Live Demo & Try it yourself!

Read More » »

#HTML #multimedia #video #facebook #social media

Playing a YouTube Video in HTML

2,619
Try it

To play your video on a web page, do the following:

Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)

https://www.youtube.com/watch?v=3lOjNDvVeZA

here "3lOjNDvVeZA" is video id

<!DOCTYPE html>
<html>
<body>
<h2>YouTube Video in an iframe</h2>
<iframe width="420" height="345" src="https://www.youtube.com/embed/3lOjNDvVeZA">
</iframe>

</body>
</html>

Live Demo & Try it yourself!

Read More » »

#HTML #YouTube #multimedia #video #embed

Video - Methods, Properties, and Events

2,619
Try it

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!

Read More » »

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

Muted video after autoplay

2,619
Try it

<!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!

Read More » »

#HTML #video #autoplay #muted

Video Autoplay

2,619
Try it

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!

Read More » »

#HTML #multimedia #video #autoplay

Video Element

2,619
Try it

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!

Read More » »

#HTML #multimedia #video

HTML <video> Tag

Dailymotion Video and Image

Instagram Video

Fetch Image from YouTube's Video

Facebook Video

Playing a YouTube Video in HTML

Video - Methods, Properties, and Events

Muted video after autoplay

Video Autoplay

Video Element

HTML Tags

HTML Examples