Taking into account the principles of the HTML5 standard: The new features are based on HTML, CSS, DOM, and JavaScript, reducing the need for external plug-ins (such as Flash), independent of the device, etc., we selected several key features of HTML 5 to evaluate the browser system.
- Video playback Tag Videos
- Audio playback Flag
- Drawing marker Canvas
- Form control tag URL, email, etc.
- Local client Storage
Browser (version) selection
Due to the wide range of browser brands and versions available today, it is difficult to cover all of our products, so setting up a test browser here is the main choice: mainstream brands, mainstream versions and the latest version (officially released). According to StatCounter released 2011 2 ~ March Browser market share statistics distribution, the mainstream brand 1 shows.
As can be seen from Figure 1, Microsoft's i n T e R n E texplorer with its mix of IE6, IE7, IE8, IE9 and other versions occupy the top, open source browser Firefox followed, its open architecture has attracted many excellent plug-ins, and become the web Developer's main development debugging platform. Google's main push Chrome has taken the third place.
The main browser version distribution is shown in 2.
Figure 2 Browser main version distribution map
In addition to some of the latest browser versions, all of the browsers (versions) we have selected are shown in table 1.
Table 1 Test Browser
HTML5 Compatibility analysis
Video playback Tag Videos
Before the advent of HTML5 technology, most web video playback was done through browser plugins such as Adobe Flash, which required customers to install the appropriate components before viewing the video. The advent of the video tag makes the developer no longer dependent on a particular third-party technology, the following code snippet plays a video file, sets the size of the screen, with a control button (Pause/progress bar, etc.):
1 <! DOCTYPE html>
2
3 <body>
4
5 <video width= "height=" controls= "Controls" >
6 <source src= "Movie.ogg" type= "Video/ogg"/>
7 <source src= "Movie.mp4" type= "Video/mp4"/>
8 <source src= "MOVIE.WEBM" type= "VIDEO/WEBM"/>
9 Your Browser does not support the video tag.
Ten </video>
One
</body>
The video element is potentially supported in a variety of formats, including:
- ogg--ogg video files with Theora video encoding and Vorbis audio encoding;
- mpeg4--MPEG 4 video files with H. Video encoding and AAC audio encoding;
- webm--WebM video files with VP8 video encoding and Vorbis audio encoding
The level of acceptance of these video formats in the HTML5 final standard is still in the game, but the browser has started to selectively support video tagging. Table 2 shows the compatibility test results.
Table 2 video Tag videos test results
Here are a few things to note:
- The most recently released IE9 supports only MPEG4 (H. Encode) format files (supported hardware acceleration), and WEBM video formats are supported if the WEBM/VP8 plugin is installed.
- The Safari browser relies on QuickTime for video playback, so the video format supported by Safari is consistent with QuickTime. Note: QuickTime is preinstalled on Mac machines and its default supported video format is MPEG4, but QuickTime requires manual installation on Windows systems, which means that Safari does not support all video formats by default on Windows. This needs to be understood by web developers.
- Firefox 4.0 will also support the WEBM format.
- Chrome has announced that it no longer supports MPEG format videos.
- The video element has a preload property, and the possible values include auto--when the page loads and loads the entire video, meta--loads the metadata when the page loads, none--when the page loads without loading the video.
Web developers should choose the appropriate preload properties based on the actual context of the Web page to achieve better front-end performance.
Audio playback Flag
Similar to the video tag Vidio, audio playback flag is also an element introduced by the HTML5 standard, and the following code plays an audio with a control button:
1 <audio controls= "Controls" >
2 <source src= "Song.ogg" type= "Audio/ogg"/>
3 <source src= "Song.mp3" type= "Audio/mpeg"/>
4 Your Browser does not support the audio element.
5 </audio>
Audio is potentially supported in a variety of formats, including Oggvorbis, MP3, AAC, WAV, and so on, as shown in table 3 for the level of support for audio tags in different browsers.
Table 3 Audio test results
There are a few points to note:
- Because of the inclusion relationship, the audio tag auido is basically consistent with the video result;
- IE8 does not support video and audio tags, IE9 has just introduced these elements;
- The audio element also has the Preload property, and note that the property value is set correctly.
Drawing marker Canvas
In the world of Web 2.0, dazzling graphics are an essential component. The canvas elements introduced by HTML5 Enable Web developers to draw lines, graphics, add text and images on a page through JavaScript. The following code snippet simply draws a blue rectangle on the page:
1 <canvas id= "MyCanvas" width= "height=" ></canvas>
2
3 <script type= "Text/javascript" >
4 var C=document.getelementbyid ("MyCanvas");
5 var cxt=c.getcontext ("2d");
6 cxt.fillstyle= "#0000FF";
7 cxt.fillrect (0,0,150,75);
8 </script>
The test results for the canvas are shown in table 4.
Table 4 drawing marks Canvas test results
We are delighted to see that the various browsers support the canvas very high, for IE8 restrictions, can be resolved through the open source project Explorercanvas, only two steps required:
Include JS file
Include the canvas element directly or create it dynamically:
1 var el=document.createelement (' canvas ');
2 g_vmlcanvasmanager.initelement (EL);
3 var ctx=el.getcontext (' 2d ');
Form 2.0 Elements of forms
For enterprise Web Apps, form controls are one of the most important page elements. Before HTML 5, various types of forms could only be completed by the developer through complex property settings and constraints (through scripting). The developed HTML 5 standard introduces a series of clear and functional form control tags, including email, URL, number, range, search, color, etc., as well as form attributes AutoComplete, autofocus, and so on. Here is a simple example where users fill out e-mail boxes (automatically detect the correct format) and personal homepage (automatically detect the correct format), etc., and then submit it to the backend system:
1 <form action= "form_action.asp" >
2 First Name: <input type= "text" name= "fname" value= "Mickey"/><br/>
3 Last Name:<input type= "text" name= "lname" value= "Mouse"/><br />
4 <input type= "Submit" value= "Submit"/>
5 </form>
Because the form controls and properties introduced by HTML5 are much more, some of the tests are selected here, as shown in table 5.
Table 5 Partial FORM element test results
A few notes:
Firefox 4.0 will start to support email, url and other form elements;
AutoFill already exists as a basic feature of many browsers, and the AutoComplete attribute needs to be differentiated from the HTML5 standard.
Local client Storage
Web developers often manage customer information through cookies, but when the amount of data is large, this approach is relatively inefficient, on the one hand because the cookie has a size limit, and each time it is passed through a network request. HTML5 introduces two new types of storage:
localstorage--data storage with no time limit
sessionstorage--data Storage for session
1 <! DOCTYPE html>
2
3 <body>
4
5 <script type= "Text/javascript" >
6
7 if (sessionstorage.pagecount)
8 {
9 Sessionstorage.pagecount=number (sessionstorage.pagecount) +1;
Ten}
One else
{
sessionstorage.pagecount=1;
+ }
document.write ("This is a count in the session store:" + Sessionstorage.pagecount + "time (s) this session." Restart the browser, this count will clear 0 ");
if (localstorage.pagecount)
+ {
Localstorage.pagecount=number (Localstorage.pagecount) +1;
+ }
Else
{
localstorage.pagecount=1;
(+ }
document.write ("This is the count in the local store:" + Localstorage.pagecount + "time (s). Restart the browser, will continue to count");
-
</script>
-
<p>refresh the page to see the counter increase.</p>
in
<p>close the browser window, and try again, and the counter has been reset.</p>
</body>
The following example implements a simple counter using localstorage and Sessionstorge respectively, as shown in table 6.
Table 6 Local Customer single storage test results
This feature is very powerful for web developers, so let's take a look at a browser that implements the HTML5 local client store tag for Sessionstorage and all tested browsers! However, to mention security here, Web developers use these elements to keep in mind that the data stored on the client may be viewed and even modified by others who are authorized to use the browser, so be aware of the need to save sensitive information.
HTML5 support for each browser