HTML5 APIs (2) and html5apis

HTML5 APIs (2) and html5apis

1: Video Player

2: Geographic Positioning

Our html5-supported browser provides us with an api to get your current location.

It mainly uses geolocation (geographic location) and objects to access hardware to obtain the longitude and latitude ..

1  if (navigator.geolocation){2  　　navigator.geolocation.getCurrentPosition(showPosition);3  } else{4 　　x.innerHTML="Geolocation is not supported by this browser.";}5  }

We get a latitude and longitude. We call the map. We call Baidu map. (street view map)

3: Drag
Drag and Drop In html5
1) elements currently dragged
Ondrag is applied to drag and drop elements.
Ondragstart is applied to drag and drop elements. It is called when the drag starts.
Ondragleave is used to drag an element. It is called when the mouse leaves the drag element.
Ondragend is applied to drag elements. It is called when the drag ends.
2) Target Element
Ondragenter is applied to the target element. It is called when the drag element enters.
Ondragover is applied to the target element and called when it stays on the target element.
Ondrop is applied to the target element. It is called when the mouse is removed from the target element.
Ondragleave is applied to the target element. It is called when the mouse leaves the target element.

4: web Storage
We can use sessionStorage and localStorage to save data locally.

1 setItem(key,value)2 getItem();3 removeItem();4 clear();

The sessionStorage object demonstrates these four methods. (The operation designed for data is to add, delete, modify, and query data ..)
LocalStorage saves data; methods are the same
Differences between sessionStorage and localStorage
① LocalStorage data is permanently stored
② SessionStorage will disappear when the browser is closed

5: application-level cache (cache files, css, js images .)
Create an html file, and then I want to cache it
First, I want to create a demo. appcache
Then reference the demo. appcache file in html.
Manifest = "demo. appcache"
Then, specify the cached data in the demo. appcache cache file.

The first line:
CACHE MANIFEST
I need to specify the files to be cached
CACHE:
Path of the file to be cached
NETWORK:
The files must be accessible through the network.