Simplified HTML5 learning notes (4): video, audio, meter, datalist, keygen, output, html5datalist

Simplified HTML5 learning notes (4): video, audio, meter, datalist, keygen, output, html5datalist
Video

With the <video> tag, We can discard the Flash that is not very pleased recently and play video files directly on the page. Video files are naturally the most semantic file formats, but this element tag also supports audio and images.

In the past (and now), we usually used tedious and ugly code like the following to place videos on pages. However, This method requires the browser to install Flash plug-ins and support JavaScript:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">  <param name="allowFullScreen" value="true" />  <param name="allowscriptaccess" value="always" />  <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />  <param name="allowfullscreen" value="true" />  <embed type="application/x-shockwave-flash" width="425" height="344"  src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">  </embed></object>

 

HTML5 method:

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>  <p>    Try this page in Safari  4! Or you can    <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a>    instead.  </p></video>

 

<Video> tags have the following common attributes:

1. Autoplay: Used to set whether the video is automatically played after the page is loaded.
2. Src: Specifies the file link or download path for the video. When the browser does not support the <video> label or a playback error, it can be provided to the user for download.
3. Autobuffer: Used to set whether the video is automatically buffered. If this parameter is set, the video is automatically downloaded and buffered after the page is loaded. After you click the play button, at least some of the videos can be directly watched without waiting.
4. Poster: used to set a "default image frame" background image for a video. It can be displayed to the user when the video cannot be normally loaded and played.
5. Controls: Used to set whether to add control bars for a video, such as "playing" and "paused". The control bar can be customized.
6. Loop: Used to set whether the video is played cyclically.
7. Width and Height: used to control the Width and Height of a video.

Although the <video> element has received much attention and has great potential, it is still time to be fully supported by mainstream browsers. Currently, if you need to use the <video> label, we can use a combination of code similar to the following:

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">  <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360"  codebase="http://www.apple.com/qtactivex/qtplugin.cab">    <param value="http://www.youtube.com/demo/google_main.mp4">    <param value="true">    <param value="false">    <embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360"    autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">    </embed>  </object></video>

 

Audio

The new element tag <audio> In HTML5 has been waiting for a long time. It provides native support for audio playback without the need for additional extensions in browsers; currently, browsers that support <audio> elements mainly include Safari 4, Firefox 3.5, and Chrome 3.

<Audio> some common attributes of element labels:

1. Src: Specifies the audio file path.
2. Autobuffer: Set whether to automatically buffer audio when the page is loaded.
3. Autoplay: sets whether the audio is automatically played.
4. Loop: Set whether or not to play audio cyclically.
5. Controls: sets whether to display the playback control panel.

These attributes are similar to those of the <video> element tag. Here is a sample code:

<audio src="elvis.ogg" controls autobuffer></audio>

 

This code can work normally in Firefox 3.5 and Chrome 3. For Safari 4, you need to replace mp3 files with audio files in ogg format. However, given that W3C HTML5 definition specifications are not finalized, these format restrictions may change in the future.

According to the definition specification, the following API methods can be used:

1. Play (): play audio
2. Pause (): pause playback
3. CanPlayType (): command the browser to determine whether the current audio file can be played
4. Buffered (): Set the start and end time of the buffer part for the file.

In addition, you can use the <source> element tag in combination with <audio>; <source> to specify multiple audio files. If the current browser does not support the first file, then <audio> automatically tries to play the file specified in the following <source>. We can also add the regular <embed> code behind them to load the Flash Player as a backup solution; example:

<audio controls autobuffer>  <source src="elvis.ogg" />  <source src="elvis.mp3" />  <!-- now include flash fall back --></audio>

 

Meter

The meter element label is used to indicate the level scalar or minute value with a known range and measurable, such as the disk usage ratio and keyword matching degree. It should be noted that <meter> cannot be used to indicate any value without a known range, such as weight or height, unless the range of their values has been set. <Meter> the element has six attributes:

1. Value: indicates the actual Value of the current scalar. If this parameter is not specified, the first number in the <meter> label is considered as the actual Value, for example, "2" in <meter> 2 out of 10 </meter>. If there are no numbers in the tag, the actual scalar value is 0.
2. Min: the minimum value of the current scalar. If not specified, the value is 0.
3. Max: the maximum value of the current scalar. If it is not specified, it is 1. If the specified maximum value is smaller than the minimum value, the minimum value is considered as the maximum value.
4. Low: the Low-value area of the current scalar. It must be less than or equal to the number of the high-value area of the scalar. If the number of the Low-value area is smaller than the minimum value of the scalar, it is considered to be the minimum value.
5. High: the High value area of the current scalar.
6. Optimum: the Optimum value. Its range is between the minimum and maximum values, and it can be in the high value zone.

Let's look at some code examples. First, do not set any attributes:

<p>Your score is:  <meter>2 out of 10</meter></p>

Then, you can increase the attribute settings of the maximum and minimum values:

<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>

Attribute settings for low-value areas, high-value areas, and best values are added:

<p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>

The maximum value of <meter> is considered as 100% or 1.

The following code can be used as a holiday countdown:

<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>

The content in the <meter> label can contain no numbers, and the maximum value is regarded as 1. refer to the following code:

<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p><p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p><p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>

 

Datalist

You can use datalist with the new attribute list of input to create a combo box. When you double-click input, you can provide options for users to choose from, similar to historical records.

<input list="browsers"><datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"></datalist>

 

Keygen

<Keygen> the tag specifies the key pair Generator Field Used for the form. When a form is submitted, the private key is stored locally and the Public Key is sent to the server.

<form action="demo_keygen.asp" method="get">Username: <input type="text" name="usr_name" />Encryption: <keygen name="security" /><input type="submit" /></form>

 

Output

<Output> labels define different types of output, such as the output of scripts. For example:

<Form action = "" method = "get"> <p> 10 + 5 = <output name = "sum"> </output> </p> <button type =" submit "> computing </button> </form> <script type =" text/javascript "> (function () {var f = document. forms [0]; if (typeof f ['sum']! = 'Undefined') {f. addEventListener ('submit ', function (e) {f ['sum']. value = 15; e. preventDefault () ;}, false) ;}else {alert ('your browser is not ready yet! ') ;}}) (); </Script>

Copyright statement: This article is the original author of the http://www.zuiniusn.com, not allowed by the blogger can not be reproduced.