HTML5 APIs and Media Interview Questions

With <audio> and <video>. Add controls for the browser's player, list <source> elements in several formats (the first supported one plays), and put fallback text inside.

<video controls width="640" height="360" poster="cover.jpg">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
  <track kind="captions" src="intro.en.vtt" srclang="en" label="English">
  Your browser does not support video. <a href="intro.mp4">Download it</a>.
</video>

poster shows an image before playback, and <track> adds WebVTT captions. See the video page.

Browsers block autoplay with sound, so a video with autoplay usually plays only when it is also muted.

<video autoplay muted loop playsinline src="hero.mp4"></video>

playsinline asks mobile browsers to play it in the page, not full screen. video.play() returns a promise that rejects when autoplay is blocked; catch it and show a play button.

SVG is vector graphics made of DOM elements; <canvas> is a bitmap you draw on with JavaScript, with no record of the shapes.

<!DOCTYPE html>
<svg width="120" height="120">
  <circle cx="60" cy="60" r="40" fill="#3b82f6"><title>SVG circle</title></circle>
</svg>
<canvas id="c" width="120" height="120"></canvas>
<script>
  const ctx = document.getElementById('c').getContext('2d');
  ctx.fillStyle = '#f59e0b';
  ctx.beginPath();
  ctx.arc(60, 60, 40, 0, Math.PI * 2);
  ctx.fill();
</script>

SVG stays sharp when scaled, and each shape can be styled, clicked and read by screen readers, but thousands of nodes get slow. Canvas suits games and charts with very many points.

localStorage persists until cleared and is shared by the origin's tabs; sessionStorage lives in one tab until it closes; cookies (about 4 KB each) go to the server with every request. Any script on the page can read storage but not an HttpOnly cookie, so session tokens belong in one.

data-* attributes store custom values on an element. JavaScript reads them through element.dataset (data-user-id becomes dataset.userId), and CSS can select on them.

<!DOCTYPE html>
<style>
  button[data-active="true"] { outline: 3px solid #f59e0b; }
</style>
<button data-color="#bfdbfe" data-label="Blue">Blue</button>
<button data-color="#bbf7d0" data-label="Green">Green</button>
<p id="out">Pick a color</p>
<script>
  document.querySelectorAll('button').forEach((b) => {
    b.addEventListener('click', () => {
      document.querySelectorAll('button').forEach((x) => (x.dataset.active = 'false'));
      b.dataset.active = 'true';
      document.body.style.background = b.dataset.color;
      document.getElementById('out').textContent = 'Picked ' + b.dataset.label;
    });
  });
</script>

Values are always strings, and they sit in the page source, so never put secrets there.

<dialog> is a native modal. showModal() opens it above a page made inert, closes it on Escape and styles the overlay with ::backdrop; close(value) sets returnValue.

<!DOCTYPE html>
<style>dialog::backdrop { background: rgb(0 0 0 / 0.4); }</style>
<button id="open">Delete file</button>
<p id="result"></p>
<dialog id="confirm">
  <p>Delete this file?</p>
  <button id="yes">Delete</button>
  <button id="no">Cancel</button>
</dialog>
<script>
  const d = document.getElementById('confirm');
  document.getElementById('open').onclick = () => d.showModal();
  document.getElementById('yes').onclick = () => d.close('delete');
  document.getElementById('no').onclick = () => d.close('cancel');
  d.addEventListener('close', () => {
    document.getElementById('result').textContent = 'returnValue: ' + d.returnValue;
  });
</script>

A <form method="dialog"> inside it closes it on submit, with the button's value as returnValue.

<template> holds HTML that is parsed but not rendered: its images do not load and its scripts do not run until you clone the content into the page.

<!DOCTYPE html>
<template id="row">
  <li><strong class="name"></strong>: <span class="score"></span></li>
</template>
<ul id="list"></ul>
<script>
  const players = [['Asha', 42], ['Ravi', 37], ['Meera', 51]];
  const tpl = document.getElementById('row');
  for (const [name, score] of players) {
    const li = tpl.content.cloneNode(true);
    li.querySelector('.name').textContent = name;
    li.querySelector('.score').textContent = score;
    document.getElementById('list').append(li);
  }
</script>

template.content is a DocumentFragment. Filling clones with textContent means user data is never parsed as markup.

A Web Worker runs JavaScript on a background thread so long computations do not freeze the page. It cannot touch the DOM; it talks to the page with messages.

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ numbers: bigArray });
worker.onmessage = (e) => console.log('sum', e.data);

// worker.js
onmessage = (e) => {
  const sum = e.data.numbers.reduce((a, b) => a + b, 0);
  postMessage(sum);
};

Follow-up: what is a service worker? A worker that sits between the page and the network, for offline caching and push notifications.

navigator.geolocation.getCurrentPosition() asks the user for permission and, if granted, passes latitude, longitude and accuracy to a callback. It works only on secure pages (HTTPS or localhost).

navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude, pos.coords.accuracy),
  (err) => console.log('No location:', err.message),
  { enableHighAccuracy: false, timeout: 10000 }
);

Handle the error callback, since users can refuse, and ask after a user action, not on page load.

Add a <track> element inside <video> that points to a WebVTT (.vtt) file. kind says what it is, srclang its language, label the name in the player's menu, and default turns one on.

<video controls width="640" src="lesson.mp4">
  <track kind="captions" src="lesson.en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="lesson.es.vtt" srclang="es" label="Español">
</video>

A .vtt file is plain text: the line WEBVTT, then cues such as 00:00:01.000 --> 00:00:04.000 followed by their text. Captions also describe sounds and speakers for deaf viewers; subtitles only translate the dialogue. A track from another origin needs crossorigin on the video and CORS headers.