Home > Web Front-end > H5 Tutorial > body text

Xiaoqiang's road to HTML5 mobile development (12) - starting from a multimedia tag

黄舟
Release: 2017-01-22 11:33:45
Original
1437 people have browsed it

1. Video playback

<html>  
    <head>  
        <title>多媒体播放</title>  
    </head>  
    <body>  
        <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4">  
    </body>  
</html>
Copy after login

The effect is as follows:

Xiaoqiangs road to HTML5 mobile development (12) - starting from a multimedia tag

## tag is a new tag in HTML 5.

Attributes

New 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 HTML5

Let’s add a width attribute to try

<embed src="http://demo.inwebson.com/html5-video/iceage4.mp4" width="100px"/>
Copy after login


The type attribute specifies the MIME type of the embedded content.

Xiaoqiangs road to HTML5 mobile development (12) - starting from a multimedia tag

For MIME types, please refer to IANA MIME types

For example:

<!DOCTYPE html>  
<html>  
<body>  
  
<embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />  
  
</body>  
</html>
Copy after login
2. 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/html

xml document.xml text/xml

XHTML document.xhtml application/xhtml+xml

Normal text.txt text/plain

RTF text.rtf application/rtf

PDF document .pdf application/pdf

Microsoft Word file .word application/msword

PNG image.png image/png

GIF graphic.gif image/gif

JPEG graphic.jpeg,. jpg image/jpeg

au sound file .au audio/basic

MIDI music file mid,.midi audio/midi,audio/x-midi

RealAudio music file. ra, .ram audio/x-pn-realaudio

MPEG file .mpg,.mpeg video/mpeg

AVI file .avi video/x-msvideo

GZIP file .gz application/x-gzip

TAR file .tar application/x-tar

Any binary data application/octet-stream

3. 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.html

    Latest 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):

##Attributes

Value

Description

##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)!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template