This paper is the official HTML5 training course for Brother Lian it education organization, mainly introduces: HTML5 Mobile Development Road (12)--from a multimedia label
First, video playback
[HTML]View Plain Copy print?
- <html>
- <head>
- <title> Multimedia player </title>
- </head>
- <body>
- <embed src="Http://demo.inwebson.com/html5-video/iceage4.mp4">
- </Body>
- </html>
The effect is as follows:
The <embed> tag is a new label in HTML 5.
PropertyThe new property in the HTML5.
Properties value Description Height Pixels Sets the height of the embedded content. Src Url The URL of the embedded content. Type Type Defines the type of embedded content. Width Pixels Sets the width of the embedded content.
<embed> tags support global properties in HTML5, while supporting event properties in HTML5 Let's add a width property to try it out. [HTML]View Plain Copy print?The type attribute specifies the MIME type of the content being embedded.
- <embed src="Http://demo.inwebson.com/html5-video/iceage4.mp4" width="100px"/>
For MIME types see IANA MIME types
For example: [HTML]View Plain Copy print?
- <! Doctype html>
- < html>
- <body>&NBSP;&NBSP;
- <embed src= "/i/helloworld.swf" type= "Application/x-shockwave-flash" />
- </body>&NBSP;&NBSP;
- </html>
Ii. introduction of the IANA MIME
Multi-purpose Internet Mail extension type is the type of file that sets an extension that is opened by an application, and the browser automatically opens with the specified application when the extension file is accessed. Many are used to specify some client-customized file names, as well as some ways to open media files.
Each MIME type consists of two parts, preceded by a large category of data, such as audio audio, image image, and so on, followed by a specific category. Common MIME Types (generic): Hypertext Markup Language text. HTML text/htmlxml document. XML text/xmlxhtml document. XHTML application/xhtml+xml Plain text. txt text/ Plainrtf text. rtf application/rtfpdf document. PDF Application/pdfmicrosoft Word file. Word application/mswordpng image. png image/ Pnggif graphics. gif image/gifjpeg graphics. jpeg,.jpg Image/jpegau sound file. Au audio/basicmidi music file Mid,.midi audio/midi,audio/ X-midirealaudio music files. RA,. Ram audio/x-pn-realaudiompeg file. mpg,.mpeg Video/mpegavi file. avi video/x-msvideogzip file. gz Application/x-gziptar file. Tar application/x-tar arbitrary binary data Application/octet-stream
Iii. introduction of HTML5
HTML5 will be the new standard for HTML, XHTML, and HTML DOM.
The last version of HTML was born in 1999. Since then, the Web world has undergone great changes.
HTML5 is still in perfect. However, most modern browsers already have some HTML5 support.
HTML5 is the result of the cooperation between the WHATWG and the consortium.
--W3C refers to World Wide Web Consortium, www Alliance.
--WHATWG refers to the Web Hypertext application Technology working Group.
WHATWG is dedicated to Web forms and applications, while the website focuses on XHTML 2.0. In 2006, the two sides decided to work together to create a new version of HTML.
Some of the rules established for HTML5:
- The new features should be based on HTML, CSS, DOM, and JavaScript.
- Reduce the need for external plug-ins (Flash, for example)-with a lot of powerful multimedia tags built in
- Better error handling
- More tags for replacing scripts
- HTML5 should be independent of the device – it works perfectly on both PC and mobile devices
- The development process should be transparent to the public
Some interesting new features in HTML5:
- Canvas Elements for painting
- Video and audio elements for media playback
- Better support for local off-line storage
- New special content elements such as article, footer, header, nav, section
- New form controls, such as Calendar, date, time, email, url, search
For more detailed HTML5 can refer to my Blog Special topic: http://blog.csdn.net/column/details/dawanganban-html5.html
The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features.
Iv. Global Properties in HTML5
The following global properties are available for any HTML5 element
Properties description accesskey Specify keyboard shortcuts for accessing elements CLA The SS specifies the class name of the element (used to specify the class in the style sheet). contenteditable Specifies whether users are allowed to edit content. contextmenu the context menu for the specified element. dir Specifies the text direction of the content in the element. draggable Specifies whether the user is allowed to drag elements. dropzone Specifies what happens when the dragged item/data is dragged and dropped into the element. hidden specifies that the element is irrelevant. The hidden elements are not displayed. ID Specifies the unique ID of the element. lang Specifies the language code for the content in the element. spellcheck Specifies whether the element must be checked for spelling or grammar. The style Specifies the inline style of the element. tabindex Specifies the tab control order for the element. title Specifies additional information about the element.
V. Global Event Properties
HTML 4 adds the ability to trigger behavior in the browser through events, such as when a user clicks on an element to start a JavaScript.
The following table lists the standard event properties that can be inserted into an HTML 5 element to define event behavior.
Window Event PropertiesThe event that is triggered by the Window object.
For <body> Tags: the new label (HTML5) is the color of the logo
Form Events
Properties value Description Onafterprint Script Run a script after printing a document Onbeforeprint Script Run a script before the document is printed Onbeforeonload Script Run the script before the document is loaded Onblur Script Run script when window loses focus OnError Script Run a script when an error occurs onfocus Script Run script when window gets focus Onhaschange Script Run a script when the document changes OnLoad Script Run a script when the document is loaded OnMessage Script Run script when message is triggered Onoffline Script Run scripts when documents are offline Ononline Script Run a script when the document is online Onpagehide Script Run script when window is hidden Onpageshow Script Run script when window is visible Onpopstate Script Run script when window history changes Onredo Script Run the script when the document executes the action (redo) OnResize Script Run the script when you resize the window for large hours Onstorage Script Run script when document load is loaded OnUndo Script When the Web Storage zone is updated (when the data in the storage space changes) OnUnload Script Run a script when the user leaves the document An event that is triggered by an action inside an HTML form.
Applies to all HTML 5 elements, but is most commonly used in form elements:
Keyboard events
Properties value Description Onblur Script Run script when element loses focus OnChange Script Run the script when the element changes OnContextMenu Script Run script when context menu is triggered onfocus Script Run script when element gets focus Onformchange Script Run the script when the form changes Onforminput Script Run script when form gets user input Oninput Script Run script when element gets user input Oninvalid Script Run script when element is invalid OnReset Script Run the script when the form is reset. HTML 5 is not supported. Onselect Script Run a script when you select an element OnSubmit Script Run a script when you submit a form Events triggered by the keyboard.
Applies to all HTML 5 elements:
Mouse events
Properties value Description OnKeyDown Script Run the script when you press the key onkeypress Script Run the script when you press and release the key OnKeyUp Script Run the script when you release the key Events triggered by a mouse or similar user action.
Applies to all HTML 5 elements:
Media events
Properties value Description OnClick Script Run a script when you click the mouse OnDblClick Script Run a script when you double-click the mouse Ondrag Script Run a script when you drag an element Ondragend Script Run script at the end of a drag operation OnDragEnter Script Run a script when an element is dragged to a valid drag-and-drop target OnDragLeave Script Run a script when an element leaves a valid drag-and-drop target OnDragOver Script Run a script when an element is dragged over a valid drag-and-drop target Ondragstart Script Run the script when the drag operation starts OnDrop Script Run the script when the dragged element is being dragged and dropped OnMouseDown Script Run script when mouse button is pressed OnMouseMove Script Run a script when the mouse pointer moves onmouseout Script Run a script when the mouse pointer moves out of the element onmouseover Script Run script when mouse pointer moves above element OnMouseUp Script Run a script when you release the mouse button OnMouseWheel Script Run a script when you rotate the mouse wheel Onscroll Script Run a script when scrolling an element's scroll bar Events triggered by media such as video, image, and audio.
Applies to all HTML 5 elements, but is most commonly used in media elements such as audio, Embed, IMG, object, and Video:
The next article will detail the use of global properties and events
Properties value Description Onabort Script Run script when abort event occurs Oncanplay Script Run script when media is able to start playing but may need to stop because of buffering Oncanplaythrough Script Run scripts when the media is able to play to the end without having to stop because of buffering Ondurationchange Script Run scripts when media length changes Onemptied Script Run a script when the media resource element suddenly is empty (network error, load error, and so on) onended Script Run the script when the media has reached the end OnError Script Run a script when an error occurs during element loading Onloadeddata Script Run script when media data is loaded Onloadedmetadata Script Run the script when the media element's duration and other media data is loaded Onloadstart Script Run script when browser starts loading media data OnPause Script Run script when media data is paused Onplay Script Run script when media data is about to start playing Onplaying Script Run script when media data has started playing OnProgress Script Run a script when the browser is fetching media data Onratechange Script Run the script when the playback rate of the media data changes onReadyStateChange Script Run the script when the Ready state (Ready-state) changes Onseeked Script Script is run when the positioning attribute [1] of the media element is no longer true and the positioning is ended Onseeking Script Run the script when the Location property of the media element is true and positioning is started Onstalled Script Run the script when there is an error in retrieving the media data (latency) Onsuspend Script Run script when the browser is already fetching media data but stops before retrieving the entire media file Ontimeupdate Script Run the script when the media changes its playback position Onvolumechange Script Run the script when the media changes the volume or when the volume is set to mute Onwaiting Script Run the script when the media has stopped playing but you intend to continue playing
HTML5 Mobile Development Road (12)--from a multimedia tag speaking of one, video playback
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
