Summary of h5 practical use and analysis methods

The video tag in HTML5 and its effect of imitating a video player are widely used on some mobile phones. Because the mobile version has basically abolished the dictatorship of flash and allowed HTML5 to be the master, it has better support for videos. So today I will give you a small example of HTML5 video tag simulating a video player, so that you can better understand HTML5 and its effective application in projects. HTML code

&

1. HTML5 actual combat and analysis of media elements (6. Video examples)

Introduction: The video tag in HTML5 and its effect of imitating the video player are widely used on some mobile phones. Because the mobile version has basically abolished the dictatorship of flash and allowed Html5 to be the master, it has better support for videos. So today I will give you a small example of HTML5 video tag simulating a video player, so that you can better understand HTML5 and its effective application in projects.

2. HTML5 Practical Combat and Analysis of WebSockets Introduction

Introduction: The HTML5 WebSockets specification defines an API that allows web pages to communicate with remote hosts in two directions using the WebSockets protocol. Introduces the WebSocket interface and defines a full-duplex communication channel over a socket on the network. Html5 WebSockets provide a huge reduction in unnecessary network traffic and latency without the climb-polling and long-polling solutions being used to simulate a full-duplex connection by maintaining two connections.

3. HTML5 actual combat and analysis of historical management (history object)

Introduction: HTML5 has newly added the management of history, and updated the history object to make it more convenient to manage historical status. In modern web applications, users can switch history pages through the "forward" and "back" buttons. This allows some new pages that are not opened in new pages to move forward and back freely, improving user experience.

4. HTML5 actual combat and analysis of media elements (5. Audio examples)

Introduction: I have previously introduced some concepts related to media elements in HTML5, and some event methods. It is impossible to fully understand just having some theoretical basis without practical examples, and it is even less possible to carry out practical operations based on small concepts. So today I will give you a small example of an analog music player. I hope you can better understand and use the media elements in Html5 through this example.

5. HTML5 actual combat and analysis of media elements (4. Detecting codec support and Audio constructor)

Introduction: Although media elements can implement audio and video functions, not all browsers support all codecs of the video tag and audio tag. This This means that developers must provide many media sources.

6. HTML5 actual combat and analysis of media elements (2. Attributes of media elements)

Introduction: When it comes to media elements in HTML5, we have a lot to talk about. We have just introduced the usage and introduction of media elements, but we have not yet introduced the related attributes of media elements. , so today I will introduce to you some related attributes of media elements in Html5.

7. HTML5 actual combat and analysis of media elements (3. Events and methods of media elements)

Introduction: In addition to having many attributes, media elements in HTML5, video tags and audio tags can also trigger many events and methods. These methods monitor changes in different attributes, which may be the result of media playback or the result of user manipulation of the media. Let’s start with introducing events related to media elements.

8. HTML5 actual combat and analysis of media elements (1. Introduction to video tags and audio tags)

Introduction: With the arrival of HTML5, flash cannot be supported on mobile phones. This means that music playback and video playback made with flash can only be used in Html5. The media tags video tag and audio tag are created. Coincidentally, the mobile terminal supports the media tags video tag and audio tag in HTML5 very well. This makes HTML5 very popular on mobile devices.

9. HTML5 actual combat and analysis of native drag (four dragable attributes and other members)

Introduction: We have introduced several relevant knowledge about native drag and drop in HTML5 before. Today I will introduce to you some other small things in Html5 drag and drop. Without further ado, let’s take a look together.

10. HTML5 actual combat and analysis of native drag and drop (three dataTransfer objects)

Introduction: Although native drag is implemented through dragstart, drag and dragend events. But this is just drag and drop. There are still some drag and drop problems in IE6 and IE7, and data exchange is not implemented. In order to realize the exchange of data, IE5 introduced the dataTransfer object. The dataTransfer object is a property of the event object, used to transfer data in string format from the dragged element to the drop target. Because it is a property of the event object, the dataTransfer object can only be accessed within the event handler of the drag-and-drop event. In the event handler, you can use the properties and methods of this object to complete the drag-and-drop functionality.

The above is the detailed content of Summary of h5 practical use and analysis methods. For more information, please follow other related articles on the PHP Chinese website!