how do we get a video to play in HTML? First you need an actual video in the right format. Opera supports Ogg/Theora/Vorbis, which is also supported by Firefox and Chrome.
If you have a video around you want to play but it’s not in Ogg/Theora/Vorbis, you need to convert it. You can use Firefogg or ffmpeg2theora or other programs to do this; Dive into HTML5 is an online book which covers how to do this step-by-step. It also covers how to convert to MPEG-4/H.264/AAC.
So now you have a video lying around on your server (or your local disk), and you want to play it in HTML. Use the following markup:
< video src="video.ogv" controls >
video not supported
< /video >The controls attribute instructs the browser to provide its own controls. If you want to write your own controls with JavaScript, you just leave out the controls attribute. The browser’s controls can still be enabled by the user from the context menu in Opera, and when scripting is disabled, Opera’s controls are present regardless of the controls attribute.
Category: Features
Ready to see how much you learned from HTML5 and CSS3 for the Real World? Complete this short quiz.
HTML5 is being developed as the next major version of HTML. This Code can used for new functions that can benefit developers and internet users.
HTML5 introduces number of new elements and attributes. Here are most important of them
Geolocation
Sniffing users location is not a new thing on the web. Infact most website already do this by IP address detection, but its not reliable. So HTML5′s Geolocation is an alternate method of correctly pinpointing a user’s location. The new idea is to get the location information from Wifi towers and GPS.
Offline Web Applications
The Offline Web Applications enable users continue interacting with web applications and documents even when there network connection is unavaialble. The user can, for instance, can access email locally without having to connect to the internet or install an extenal client
Using CSS to give text a visually bold appearance and using < strong > to give text more emphasis (for SEO or overall content strategy) was the correct way. In HTML5 things are similar but slightly different. Now, according to the spec, the < b > element is used to make text “stylistically offset from the normal prose without conveying any extra importance.” So it no longer means “make this bold”. Technically, the letter “b” used in the element has nothing to do with “bold” anymore. You can use < b > for key words, the lead sentence in an article (the spec uses this BBC article as an example), or other text that should stand out from the rest, but that you don’t want to have extra importance.
We’ve found an article that covers almost all aspects of the audio and video tags.
One of the major advantages of the HTML5 video element is that, finally, video is a full-fledged citizen on the Web. It’s no longer shunted off to the hinterland of object or the non-validating embed element.
So now, video elements can be styled with CSS; they can be resized on hover using CSS transitions, for example. They can be tweaked and redisplayed onto canvas with JavaScript. Best of all, the innate hackability that open web standards provide is opened up. Previously, all your video data was locked away; your bits were trapped in a box. With HTML5 multimedia, your bits are free to be manipulated however you want.
HTML is evolved again. And this time its not new version of xHTML. Its HTML5! Its different than HTML and xHTML in so may ways. Lets have a look at the important changes that it brings to Web Designing with its all new features. I am mentioning few of them here.
1. Changed Doctype: Have you ever memorized the complex Doctype statements at the time of writing your web pages? After so many years of Web Designing, I memorized and forgot it so many times. The Doctype statement is very important as it contains the HTML type information needed to validation. In HTML5 you dont need to write that complex looking doctype statement though. Instead it is written as :
< !DOCTYPE html >
We’ve found a great intro to the new canvas element in HTML5. It handles the basics pretty well, offering even a great example.
One of the new features in HTML 5 is the canvas element. Canvas is a rectangular area where you can draw various objects using the script. In a more simple way you can consider canvas as a rectangular area where you can create your own graphics in the web page.
The specification for HTML5 video is still young, so there will be problems. The most obvious issue is that it’s not supported in Internet Explorer, although the version 9 preview has support. The native UI controls are convenient, but the look and functionality are not consistent among browsers. Sandboxing a third-party video player is more difficult and requires iframes at the very least. In addition, the specification lacks strong full-screen capabilities, which have been taken for granted in Flash; Mozilla recently submitted a proposal to address this.
Flash is still very much in the lead in many other areas, such as streaming, handling different bandwidth capabilities, video capture, and content protection. Perhaps most important is that with Flash, one video file will play across all browsers on all operating systems. The browser vendors were not able to agree on a single HTML5 video format, so currently, you need at least two video files.
Using canvas we can write very little code to convert and image into black white. Really all you need to do is use the formular R*.3 + G*.59 + B*.11 and store that as each pixel. In actuality you could use any numbers as long as you store each sub pixel as the same value it will be black and white
Let’s take a closer look at HTML5 forms, and uncover today’s practical applications while peering into tomorrow’s bounty. There’s something for everybody, with improved usability for mobile browsers, sweet CSS, and easier ways to drive everyday form functionality like placeholder text.
The current draft of the HTML5 specification brings with it 13 new input field types. Yes, thirteen brand-new, shiny ways of defining the good old input element, so make some room beside text inputs for the following: