Xiaoqiang's road to HTML5 mobile development (12) - starting from a multimedia tag-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

黄舟

Jan 22, 2017 am 11:33 AM

1. Video playback

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

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"/>

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>

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

Statement

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

HTML5: The Standard and its Impact on Web DevelopmentApr 27, 2025 am 12:12 AM

The core features of HTML5 include semantic tags, multimedia support, offline storage and local storage, and form enhancement. 1. Semantic tags such as, etc. to improve code readability and SEO effect. 2. Simplify multimedia embedding with labels. 3. Offline storage and local storage such as ApplicationCache and LocalStorage support network-free operation and data storage. 4. Form enhancement introduces new input types and verification properties to simplify processing and verification.

H5 Code Examples: Practical Applications and TutorialsApr 25, 2025 am 12:10 AM

H5 provides a variety of new features and functions, greatly enhancing the capabilities of front-end development. 1. Multimedia support: embed media through and elements, no plug-ins are required. 2. Canvas: Use elements to dynamically render 2D graphics and animations. 3. Local storage: implement persistent data storage through localStorage and sessionStorage to improve user experience.

The Connection Between H5 and HTML5: Similarities and DifferencesApr 24, 2025 am 12:01 AM

H5 and HTML5 are different concepts: HTML5 is a version of HTML, containing new elements and APIs; H5 is a mobile application development framework based on HTML5. HTML5 parses and renders code through the browser, while H5 applications need to run containers and interact with native code through JavaScript.

The Building Blocks of H5 Code: Key Elements and Their PurposeApr 23, 2025 am 12:09 AM

Key elements of HTML5 include,,,,,, etc., which are used to build modern web pages. 1. Define the head content, 2. Used to navigate the link, 3. Represent the content of independent articles, 4. Organize the page content, 5. Display the sidebar content, 6. Define the footer, these elements enhance the structure and functionality of the web page.

HTML5 and H5: Understanding the Common UsageApr 22, 2025 am 12:01 AM

There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.

HTML5: The Building Blocks of the Modern Web (H5)Apr 21, 2025 am 12:05 AM

HTML5 is the latest version of the Hypertext Markup Language, standardized by W3C. HTML5 introduces new semantic tags, multimedia support and form enhancements, improving web structure, user experience and SEO effects. HTML5 introduces new semantic tags, such as, ,, etc., to make the web page structure clearer and the SEO effect better. HTML5 supports multimedia elements and no third-party plug-ins are required, improving user experience and loading speed. HTML5 enhances form functions and introduces new input types such as, etc., which improves user experience and form verification efficiency.

H5 Code: Writing Clean and Efficient HTML5Apr 20, 2025 am 12:06 AM

How to write clean and efficient HTML5 code? The answer is to avoid common mistakes by semanticizing tags, structured code, performance optimization and avoiding common mistakes. 1. Use semantic tags such as, etc. to improve code readability and SEO effect. 2. Keep the code structured and readable, using appropriate indentation and comments. 3. Optimize performance by reducing unnecessary tags, using CDN and compressing code. 4. Avoid common mistakes, such as the tag not closed, and ensure the validity of the code.

H5: How It Enhances User Experience on the WebApr 19, 2025 am 12:08 AM

H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

1 months agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

1 months agoByDDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks agoByDDD

InZoi: How To Apply To School And University

3 weeks agoByDDD

Hot Tools

Atom editor mac version download

The most popular open source editor

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Dreamweaver CS6

Visual web development tools

SublimeText3 Chinese version

Chinese version, very easy to use

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Hot Topics

Where is the login entrance for gmail email?

7758

1644

1399

1293

1234