In this Article I will describe to you how to embedded a video in your website using HTML 5 and display it.
Description: In this Article I will describe to you how to embedded 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
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 folder name"video" Step 2: copy .ogg format video in to 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 <!DOCTYPE html> <html> <head> <style> body { background: black; color:#CCCCCC; } #c2 { background-image: url(foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3B3B3B; } </style>
</head>
<p>Godda Video</p> <br>
<body onload="processor.doLoad()"> <div> <video id="video" src="You're my Love.ogg" controls="true" width="300" height="150" loop="true"/> </div>
</body>
</body> </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
The interesting part of HTML 5 is that when you right click above the video player we will get lot of option for download the video, copy the link location, full screen, unlike the flash player.
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.
Grid structure in css