Video is new tag added in HTML 5. 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 and video will in its original resolution
and if resolution is high or HD it will disturb all other element position of
your page.
Syntax :
<video width="XX" height="XX" controls>
<source src="XX" type="video/mp4">
<source src="XX" type="video/ogg">
Your browser does not support the video tag.
</video>
<source src="XX" type="video/mp4">
<source src="XX" type="video/ogg">
Your browser does not support the video tag.
</video>
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.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Girfa :
Student Help HTML5 Video</title>
</head>
<body>
<h1
align="center">Girfa
: Student Help HTML5 Video</h1><hr>
<video
width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not
support HTML5 video.
</video>
<video width="400"
autoplay>
<source src="video.mp4" type="video/mp4">
Your browser does not
support HTML5 video.
</video>
<h2>Java script with video</h2>
<div >
<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="v1" width="420">
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var
myVideo = document.getElementById("v1");
function
playPause() {
if
(myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function
makeBig() {
myVideo.width = 600;
}
function
makeSmall() {
myVideo.width = 400;
}
function
makeNormal() {
myVideo.width = 500;
}
</script>
</body>
</html>
No comments:
Post a Comment