saftutorials.com
HTML Video Tutorial

HTML Video tag use for Video Content. HTML Video use by <video> tag. Its special HTML5 tag for Video content. Its play your video on your website. 

Supported file format.

1) MP4,

2) WebM,

3) Ogg.

How to use HTML Video tag?

First write <video> tag using this structure:

<video control autoplay and more attributes> <source src="Your Video source" type="video/ogg"></video>

Basic Structure of HTML Video

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Video Tutorials</title>
</head>
<body>
<video width="400" height="250" controls="">
  <source src="../uploads/sample.ogg" type="video/ogg">
  <source src="../uploads/sample.mp4" type="video/mp4">
  This browser does not support the video element.
</video>
</body>
</html>

Double Click to Select Code

HTML Video with CSS

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Video Tutorials</title>
</head>
<body>
<video width="400" height="250" controls="" style="border:3px solid red">
  <source src="../uploads/sample.ogg" type="video/ogg">
  <source src="../uploads/sample.mp4" type="video/mp4">
  This browser does not support the video element.
</video>
</body>
</html>

 

HTML Video with Custom Thumbnail

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Video Tutorials</title>
</head>
<body>
<video width="400" height="250" controls="" style="border:3px solid red" poster="../uploads/sample.png">
  <source src="../uploads/sample.ogg" type="video/ogg">
  <source src="../uploads/sample.mp4" type="video/mp4">
  This browser does not support the video element.
</video>
</body>
</html>

 

Supported Browser

Internet Explorer: 9.0

Google Chrome: 4.0

Firefox: 3.5

Safari: 4.0

Opera: 10.0

UC Browser: 11.2

Supported Attributes

src - Video Source.

controls - Specifies Video controls.

autoplay - Control starting autoplay.

width - Define Video width

height - Define Video Height

preload - Control Video loaded when page load

poster - Set custom Thumbnail Image

loop - Control Video repeat.

Video Tutorials coming soon...

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic