HTML5 - SPLessons

HTML5 Video

Chapter 12

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Video

HTML5 Video

shape 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

Video

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

Video Attributes

shape Description

In order to control the videos on web pages, HTML5 tags have various attributes which are listed 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.

The snippet code below demonstrates how to embed the video file into web page by adjusting the video size.

<!DOCTYPE html>
<html>
  <body>
    <iframe width="420" height="315" src="https://www.youtube.com/embed/TZ1pCAtaCl4" frameborder="0" allowfullscreen>
    </iframe>
  </body>
</html>

Result
When the above code is run in a preferred browser, video is shown as the output like below.


Video Events

shape 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.

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.

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.

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

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.

<<!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&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </body> 
</html>

Result
When the above code is run in any of the preferred browser video appears with the controls as shown below.

shape Examples

The example is used to demonstrate custom video player with controls as follows.

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

Result
When the above code run in any of the preferred browser video with the controls appears as output as shown below.

Summary

shape 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.