HTML5 (i) Learning HTML5 new features

I. What are the new features of HTML5

1. <audio>, <video> for media playback

2. <canvas> for painting

3. Better support for local offline storage

4. New special content elements, such as: article, header, footer, NAV, etc.

5. New form controls, such as Calendar, date, time, email, url, search

Second, audio and video playback

1. Simple audio playback and video playback

<video width= "100%" height= "80%" src= "/media/coolshow_02.mp4" controls= "Controls" > your browser does not support this tab </video>    <audio src= "./media/my_destiny.mp3" controls= "Controls" > your browser does not support this element </audio>

The controls property above uses <video> and <audio> 's own playback controls, such as play control, sound control, full-screen control, and so on.

2. Formatting issues

How do I use the same code on different browsers because of different playback formats supported by different browsers?

HTML5 provides <resource> tags that can provide multiple sets of video formats, and the browser automatically uses the first recognizable video format.

  <video width= "height=" controls= "Controls" >             <source src= "Movie.ogg" type= "Video/ogg" >             <source src= "Movie.mp4" type= "Video/mp4" >                             your browser does not support this tab        </video>

3. Custom button for Play/pause, screen size control.

<script type= "Text/javascript" >    var myvideo = document.getElementById ("Video1");    function Playpause () {        if (myvideo.paused)            myvideo.play ();        else            myvideo.pause ();    }    function Makebig () {        myvideo.width = 560;    }    function Makesmall () {        myvideo.width =;    }    function Makenormal () {        myvideo.width = 420;    } </script>

4. Video Codec tool

1) Codec toolFFmpeg
Official website: www.ffmpeg.orgDownload:http://ffmpeg.zeranoe.com/builds/2) transcoding using the command linedirective,Enter the path to the file that needs transcoding CD d:\a Then, execute the transcoding directive d:\a> D:\ffmpeg\bin\ffmpeg-I.A.mp3-acodec LibvorbisB.mp4
    D:\ffmpeg\bin\ffmpeg: Path to the transcoding tool for the download

Three, drag

<! DOCTYPE html>

Four, canvas painting
The canvas element itself is not capable of drawing, and all the drawing work must be done in JS.
1. Draw lines
<! DOCTYPE html>

2. Draw a circle, fill
<! DOCTYPE html>

3. Draw the gradient and fill with the gradient color
<! DOCTYPE html>


V. SVG 
Similar to canvas, the difference is that SVG-drawn graphs are scalable vectors that are not dependent on resolution.
1. Draw the Pentagram
<! DOCTYPE html>


Vi. geographical location of geolocation








HTML5 (i) Learning HTML5 new features