1. Video playback 多媒体播放 Copy after loginThe effect is as follows:## tag is a new tag in HTML 5. AttributesNew attributes in HTML5. Property Description src url The URL of the embedded content. type type defines the type of embedded content. width pixels Set the width of the embedded content. tag supports global attributes in HTML5, and also supports event attributes in HTML5Let’s add a width attribute to tryCopy after login The type attribute specifies the MIME type of the embedded content. For MIME types, please refer to IANA MIME typesFor example: Copy after login2. Introduction to IANA MIME The multi-purpose Internet mail extension type is a type that sets a file with a certain extension to be opened by an application. When the file with the extension is accessed, the browser will automatically use the specified application to open it. Open. It is mostly used to specify some client-defined file names and some media file opening methods. Each MIME type consists of two parts. The first part is the big category of data, such as sound audio, image, etc., and the second part defines the specific type. Common MIME types (universal): Hypertext Markup Language text.html text/htmlxml document.xml text/xml XHTML document.xhtml application/xhtml+xmlNormal text.txt text/plainRTF text.rtf application/rtfPDF document .pdf application/pdfMicrosoft Word file .word application/mswordPNG image.png image/pngGIF graphic.gif image/gifJPEG graphic.jpeg,. jpg image/jpegau sound file .au audio/basicMIDI music file mid,.midi audio/midi,audio/x-midiRealAudio music file. 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-tarAny binary data application/octet-stream3. Introduction to HTML5 Html5 will become the new standard for HTML, XHTML and HTML DOM. The last version of HTML was created in 1999. The world of the Web has changed dramatically since then. HTML5 is still a work in progress. However, most modern browsers already have some HTML5 support. HTML5 is the result of a collaboration between the W3C and the WHATWG. ——W3C refers to World Wide Web Consortium, World Wide Web Consortium. ——WHATWG refers to Web Hypertext Application Technology Working Group. The WHATWG works on web forms and applications, while the W3C focuses on XHTML 2.0. In 2006, the two parties decided to collaborate to create a new version of HTML. Some rules established for HTML5: New features should be based on HTML, CSS, DOM and JavaScript. Reduce the need for external plug-ins (such as Flash) - many powerful multimedia tags are built-in Better error handling More tags to replace scripts HTML5 should be device independent - run perfectly on PC and mobile devices The development process should be transparent to the public Some interesting new features in HTML5: Canvas element for drawing Video and audio elements for media playback Better support for local offline 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 information on HTML5, please refer to my blog topic: http://blog.csdn.net/column/details/dawanganban-html5.htmlLatest Versions of Safari, Chrome, Firefox, and Opera support certain HTML5 features. Internet Explorer 9 will support certain HTML5 features. 4. Global attributes in HTML5 The following global attributes can be used for any HTML5 element Attributes Description accesskey Specifies the keyboard shortcut to access the element class 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 Specifies the context menu of the element. dir Specifies the text direction of the content in the element. draggable Specifies whether the user is allowed to drag the element. dropzone Specifies what happens when the dragged item/data is dropped into the element. hidden Specifies that the element is irrelevant. Hidden elements will not be displayed. id Specifies the unique ID of the element. lang Specifies the language code of the content in the element. spellcheck Specifies whether the element must be checked for spelling or grammar. style Specifies the inline style of the element. tabindex Specifies the tab key control order of elements. title Specifies additional information about the element. 5. Global event attributes HTML 4 adds the ability to trigger actions in the browser through events, such as A piece of JavaScript is launched when the user clicks on an element. #The following table lists the standard event attributes that can be inserted into HTML 5 elements to define event behavior. Window event property Events triggered by the window object. Applicable to tag: The color marked is the new tag (html5) Attribute Value Description onafterprint script Run the script after printing the document onbeforeprint script Run the script before the document is printed onbeforeonload script Run the script before the document is loaded onblur script Run the script when the window loses focus onerror script Run the script when an error occurs onfocus script Run the script when the window gains focus onhaschange script Run the script when the document changes onload script Run the script when the document is loaded onmessage script Run the script when the message is triggered onoffline script Run the script when the document is offline ononline script Run the script when the document is online onpagehide script Run the script when the window is hidden onpageshow script Run the script when the window is visible onpopstate script When the window is visible Run script when history changes onredo script Run script when document performs re-execution operation (redo) onresize script Run script when window size is resized onstorage script when Run the script when the document is loaded onundo script When the Web Storage area is updated (when the data in the storage space changes) onunload script Run the script when the user leaves the document Form events Events triggered by actions inside HTML forms. Applies to all HTML 5 elements, but is most commonly used in form elements: Attributes Value Description onblur script Run the script when the element loses focus onchange script Run the script when the element changes oncontextmenu script Run the script when the context menu is triggered onfocus script Run the script when the element gets focus onformchange script Run the script when the form changes onforminput script Run the script when the form gets user input oninput script Run the script when the element gets user input oninvalid script Run the script when the element is invalid onreset script Run the script when the form is reset. HTML 5 is not supported. onselect script Run the script when the element is selected onsubmit script Run the script when the form is submitted Keyboard event Event triggered by the keyboard. Applies to all HTML 5 elements: Attributes Value Description onkeydown script Run the script when the key is pressed onkeypress script Run the script when the key is pressed and released onkeyup script Run the script when the key is released Mouse events Events triggered by mouse or similar user actions. Applies to all HTML 5 elements: Attributes Value Description onclick script Run script when the mouse is clicked ondblclick script Run script when the mouse is double-clicked ondrag script Run script when the element is dragged ondragend script When dragged Run the script at the end of the action ondragenter script Run the script when the element is dragged to a valid drag-and-drop target ondragleave script Run the script when the element leaves a valid drag-and-drop target ondragover script Run the script when the element is dragged above the valid drag and drop target ondragstart script Run the script when the drag operation starts ondrop script When the dragged element is being dragged Run the script when the mouse button is pressed onmousedown script Run the script when the mouse button is pressed onmousemove script Run the script when the mouse pointer moves onmouseout script Run when the mouse pointer moves out of the element Script onmouseover script Runs the script when the mouse pointer moves over the element onmouseup script Runs the script when the mouse button is released onmousewheel script Runs when the mouse wheel is turned Script onscroll script Run script when scrolling the element's scroll bar Media event 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): ##AttributesValueDescription ##onabort script Run script when an abort event occurs oncanplay script When the media is able to start playback but may be required due to buffering Run script when stopped oncanplaythrough script Run script when the media can be played to the end without stopping due to buffering ondurationchange script Run script when the length of the media changes onemptied script Script to be run when the media resource element is suddenly empty (network error, loading error, etc.) onended script Script to be run when the media has reached the end onerror script When an error occurs during element loading Run script when media data is loaded onloadeddata script Run script when media data is loaded onloadedmetadata script Run script when the duration of the media element and other media data have been loaded onloadstart script When Run the script when the browser starts loading media data onpause script Run the script when the media data is paused onplay script Run the script when the media data is about to start playing onplaying script When Run the script when the media data has started playing onprogress script Run the script when the browser is fetching the media data onratechange script Run the script when the playback rate of the media data changes onreadystatechange script Script that runs when the ready-state changes onseeked script Script that runs when the positioning attribute [1] of the media element is no longer true and positioning has ended onseeking script Run the script when the media element's positioned attribute is true and positioning has started onstalled script Run the script when there is an error in retrieving the media data (delay) onsuspend script When the browser has Run the script when retrieving the media data but stop before retrieving the entire media file ontimeupdate script Run the script when the media changes its playback position onvolumechange script When the media changes volume or when the volume is Run script when set to mute onwaiting script Run script when media has stopped playing but intends to continue playing The next article will introduce the usage of global attributes and events in detail The above is Xiaoqiang’s HTML5 mobile development path (12) - starting from a multimedia tag, please pay attention to more related content PHP Chinese website (www.php.cn)!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
