Post
Ask Question

Display Video Using HTML5: Part 1

Description

 
In this article, I will describe to you how to embed a video in your website using HTML 5 and display it.
 

Content

 
Today, most videos are shown through a plugin (like flash), Silverlight, etc. However, not all browsers have the same plugins.
 
Now HTML5 specifies a standard way to include video, with the video element.
 

Video Formats

 
Currently, there are 3 supported video formats for the video element in HTML 5:
 
Below are the supported browser list.
 
 Format   IE   Firefox  Opera  Chrome  Safari
 Ogg  No  3.5+  10.5+  5.0+  No
 MPEG 4  9.0+   No  No  5.0+  3.0+
 WebM  No  4.0+  10.6+  6.0+   No
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec
  • MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec
The HTML5 <video> tag is used to specify video on an HTML document.
 
For example, we could embed a music video on our web page for visitors to listen to and watch.
 
The HTML5 <video> tag accepts some attributes that specify how the video should be played. Attributes include preload, autoload, loop and more.
 
There are no closing <video> tags.
 
Now below I will show you an example of how to display a video in HTM 5. It's very simple
 
Step 1: Create a folder first with giving the folder name"video"
 
Step 2: copy .ogg format video into this folder.
 
Step 3: Create a simple text file name "video" and save the text file as "video.html".
 
Step 4: Now open the video.html file in text mode and paste the below code
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <style>    
  5.       body {    
  6.         background: black;    
  7.         color:#CCCCCC;     
  8.       }    
  9.       #c2 {    
  10.         background-image: url(foo.png);    
  11.         background-repeat: no-repeat;    
  12.       }    
  13.       div {    
  14.         float: left;    
  15.         border :1px solid #444444;    
  16.         padding:10px;    
  17.         margin: 10px;    
  18.         background:#3B3B3B;    
  19.       }    
  20.     </style>  
  21.     </head>  
  22.     <p>Godda Video</p>  
  23.     <br>  
  24.         <body onload="processor.doLoad()">  
  25.             <div>  
  26.                 <video id="video" src="You're my Love.ogg" controls="true" width="300" height="150" loop="true"/>  
  27.             </div>  
  28.         </body>  
  29.     </body>  
  30. </html>  
See in the above HTML code in the video tag I have given my video an id, with the video source.
 
That video is included in my folder.  I also mentioned the height and width.
 
Now run the web page in chrome or Mozilla, firefox it will look like the below
 
VideoHTML1.gif
 
The interesting part of HTML 5 is that when you right-click above the video player, we will get a lot of option for downloading the video, copy the link location, full screen, unlike the flash player.
 
VideoHTML2.gif
 

Conclusion

 
So in this article, we have seen the basic funda of displaying video using HTML 5.
 
In my next article, I will show you other HTML 5 controls and more video operation in HTML 5 using .NET.


Similar Articles