HTML - HTML5 Geolocation and Media API

HTML5 introduced powerful APIs that allow websites to interact with device features in a safe and controlled way. Two important ones are the Geolocation API (to get user location) and the Media API (to play audio and video). These APIs improve user experience without requiring plugins.

1. HTML5 Geolocation API

The Geolocation API allows a website to get the user’s geographical location (latitude and longitude). This is useful for maps, delivery apps, weather apps, and location-based services.

Important facts:

• Works only on HTTPS

• User permission is mandatory

• Location may be approximate, not exact

• Uses GPS, Wi-Fi, or network data

Basic Example:

<script>
navigator.geolocation.getCurrentPosition(
  function(position) {
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);
  },
  function(error) {
    console.log("Location access denied");
  }
);
</script>

Common use cases:

• Finding nearby stores

• Showing local weather

• Auto-detecting city or country

Security note:
Never assume accuracy and never force location access.

2. HTML5 Media API (Audio & Video)

The Media API allows you to play audio and video files directly in the browser using <audio> and <video> tags—no Flash or plugins required.

Audio Example:

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>

Video Example:

<video controls ">
  <source src="video.mp4" type="video/mp4">
</video>

Built-in features:

• Play / pause

• Volume control

• Fullscreen

• Captions support

Media API with JavaScript Control

You can control media using JavaScript:

<script>
const video = document.querySelector("video");
video.play();
video.pause();
</script>

Common use cases:

• Online learning platforms

• Streaming websites

• Product demos

• Podcasts

Key Differences at a Glance

• Geolocation API adds location-based intelligence to websites

• Media API enables rich audio and video experiences

• Both are core parts of modern HTML5 development

• Always respect user privacy and permissions

These APIs make web apps feel closer to native apps while remaining simple and secure.