Introduction
HTML5 Video includes recording, reproducing, and broadcasting of moving visual images which are made digitally or on a video tape. Following are the concepts covered.
- Video
- HTML5 Video Events
Description
The purpose of HTML5 Video is playing the videos instead of using any plugins on web pages. In order to add the video file, use
<video> tags and src attribute which is used to identify the source of the media. In order to play and pause the media add the control attribute. The snippet code below demonstrates simple form to add the video file.
<video src="splessons.mp4" width="200" height="200" controls>
</video>
Description
In order to control the videos on web pages, HTML5 tags have various attributes which are listed below.
The snippet code below demonstrates how to embed the video file into web page by adjusting the video size.
[html]<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="315" src="https://www.youtube.com/embed/TZ1pCAtaCl4" frameborder="0" allowfullscreen>
</iframe>
</body>
</html>
[/html]
Result
When the above code is run in a preferred browser, video is shown as the output like below.
| Attribute | Description |
|---|---|
| autoplay | By using the autoplay attribute the video get played automatically. |
| autobuffer | By using the autobuffer attribute the video get buffered automatically. |
| controls | By using the control attribute video get controlled by providing options like playback, pause/resume, seeking, volume, etc. |
| height | height attribute is used to adjust height of the video in pixels. |
| loop | By using loop the video automatically seek from the starting after ending. |
| src | src attribute is the video url which can embeded into the web page. |
| width | width attribute is used to adjust the width of the video in pixels. |
Description
HTML5 can have various number of events for controlling the video while playing on a web page which are built by JavaScript as shown below.
By using the above events and attributes, video file can be embedded into the web pages and user can operate the file using the generated controls as shown in the code below.
[html]<!DOCTYPE html>
<html>
<head>
<title>HTML Video Tag Example</title>
</head>
<body>
<object width="425" height="350"> <param name="movie" value="https://www.youtube.com/embed/TZ1pCAtaCl4" /> <embed src="https://www.youtube.com/v/TZ1pCAtaCl4&feature=youtu.be" type="application/x-shockwave-flash" width="425" height="350" />
</object>
</body>
</html>
[/html]
Result
The above code run in any of the preferred browser then user can able to see the video with the controls as shown in below image.
User can embed the video and by using the auto play attribute the video will play automatically the code is as shown below.
[html]<<!DOCTYPE html>
<html>
<head>
<title>HTML Video Tag Example</title>
</head>
<body>
<iframe width="640" height="480" src="https://www.youtube.com/embed/TZ1pCAtaCl4?autoplay=1;rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</body>
</html>
[/html]
Result
When the above code is run in any of the preferred browser video appears with the controls as shown below.
| Attribute | Description |
|---|---|
| abort | The event get generated when play back is aborted. |
| canplay | The event get generated when the media list is full with the videos. |
| ended | The event get generated when play back is ended. |
| error | the event get generated when the error occurs. |
| play | The event get generated when the play back is stop or resume. |
| pause | The event get generated when play back is paused. |
| seeking | The event get generated when the seeking the video will begins. |
Examples
The example is used to demonstrate custom video player with controls as follows.
[html]
<!DOCTYPE>
<html>
<head>
<style>
video{box-shadow: 5px 5px 5px #A4A4A4; border:3px solid #fa4b2a; border-radius:5px;}
#videoControls{-webkit-box-shadow: 5px 5px 5px #A4A4A4;
-moz-box-shadow: 5px 5px 5px #A4A4A4;
box-shadow: 5px 5px 5px #A4A4A4;
border: 2px solid #ccc;
padding:20px;
margin: 15px;
border-radius: 20px;
width:520px;
background: rgb(252,255,244);
background: -moz-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(252,255,244,1)), color-stop(40%,rgba(223,229,215,1)), color-stop(100%,rgba(179,190,173,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
button{-moz-box-shadow:inset 0px 1px 0px 0px #e6cafc;
-webkit-box-shadow:inset 0px 1px 0px 0px #e6cafc;
box-shadow:inset 0px 1px 0px 0px #e6cafc;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c579ff), color-stop(1, #a341ee) );
background:-moz-linear-gradient( center top, #c579ff 5%, #a341ee 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c579ff', endColorstr='#a341ee');
background-color:#c579ff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #a946f5;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:6px 10px;
text-decoration:none;
text-shadow:1px 1px 0px #8628ce;
}button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a341ee), color-stop(1, #c579ff) );
background:-moz-linear-gradient( center top, #a341ee 5%, #c579ff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a341ee', endColorstr='#c579ff');
background-color:#a341ee;
}button:active {
position:relative;
top:1px;
}
#seekBar { border:2px solid #333; color:#eee; width:470px; height:10px; border-radius:5px; box-shadow: 5px 5px 5px #A4A4A4; background:#B2E0C2; }
#viewSeek { background-color:#009933; height:10px; display:inline-block; border-radius:2px; }
</style>
</head>
<body>
<video controls>
<source src="splessons.mp4" type="video/mp4">
<source src="splessons.webm" type="video/webm">
</video>
<!-- Video Player Control Buttons -->
<div id="videoControls">
<div id="seekBar"><span id="viewSeek"></span></div>
<button id="Play_Pause" onclick="togglePlay_Pause()">play>></button>
<button id="Stop_Button" onclick="StopVideo()">Stop</button>
<button id="rewind_Video" onclick="ManipulatePlaySpeed('-');" >« Rewind </button>
<button id="fastForward" onclick="ManipulatePlaySpeed('+');" >Fast Forward »</button>
<button id="decreaseVolume" onclick="AlterVolume('-')">-</button>
<button id="volumeUp" onclick="AlterVolume('+')">+</button>
<button id="mute" onclick="ToggleMute_UnMute()">mute</button>
</div>
</body>
<script>
// Select the Video Element
var video = document.getElementsByTagName("video")[0];
// Set the Default Browser Controls to false. i.e remove them
video.controls = false;
// Select the Play and Pause Button
var play_pause = document.getElementById("Play_Pause");
// Add Event Listeners inorder to alter the value of play and pause button when user toggles
video.addEventListener('play', function() {
play_pause.title = "pause";
play_pause.innerHTML = "pause[0]";
}, false);
video.addEventListener('pause', function() {
play_pause.title = "play";
play_pause.innerHTML = "play>>";
}, false);
// Event Listners to regularly update the progress Bar
video.addEventListener('timeupdate', seekBar, false);\
// Event Listners to pause the video
video.addEventListener('ended', function() { this.pause(); }, false);
// Function to stop the Video and reset the current time to zero(i.e starting point)
function StopVideo() {
video.pause();
video.currentTime = 0;
}
// Function to Toggle between Play and Pause
function togglePlay_Pause() {
if (video.paused || video.ended) {
if (video.ended) video.currentTime = 0;
video.play();
}
else {
video.pause();
}
}
// Function to Alter the Volume in steps of 0.1
function AlterVolume(direction) {
var volume = Math.floor(video.volume * 10) / 10;
video.muted = false;
if (direction == "-") {
if (volume <= 0.1) video.volume = 0;
else video.volume -= 0.1;
}
else {
if (volume >= 0.9) video.volume = 1;
else video.volume += 0.1;
}
}
// Toggles Volume between Mute and Unmute
function ToggleMute_UnMute() {
var mute = document.getElementById("mute");
if (video.muted) {
mute.innerHTML = "mute";
video.muted = false;
}
else {
mute.innerHTML = "unmute";
video.muted = true;
}
}
// Update Seekbar regularly as the video plays
function seekBar() {
var value = 0;
if (video.currentTime > 0) {
value = Math.floor((100 / video.duration) * video.currentTime);
}
document.getElementById("viewSeek").style.width = value + "%";
}
// Function to manipulate the speed of playback both fastforward and rewind
function ManipulatePlaySpeed(direction) {
if (video.playbackRate != undefined) {
if (direction == "-") video.playbackRate -= 1;
else video.playbackRate += 1;
}
else {
if (direction == "-") video.currentTime -= 1;
else video.currentTime += 1;
}
}
// Playback from the point on the Seekbar where the user clicks
function setPlayPosition(x) {
var seekBar = document.getElementById("seekBar");
var value = (x - findPos(seekBar)).toFixed(2);
var timeToSet =
((video.duration / seekBar.offsetWidth).toFixed(2) * value).toFixed(2);
video.currentTime = timeToSet;
}
// Determine the real position of the object
function findPos(obj) {
var curleft = 0;
if (obj.offsetParent) {
do { curleft += obj.offsetLeft; } while (obj = obj.offsetParent);
}
return curleft;
}
// Event Listner for Mouse Events on the SeekBar
var seekBar = document.getElementById("seekBar").addEventListener
("mouseup", function(e) { setPlayPosition(e.pageX); }, false);
</script>
</html>
[/html]
Result
When the above code run in any of the preferred browser video with the controls appears as output as shown below.
Points
- User can control the video by using controls.
- Use can adjust the height and width in pixels.
- Src is not mandatory to use.
- HTML5 does not specify the formats of the video files.