Member Avatar for Christopher_45

According to me, some important elements in HTML5 that support media are <video>, <embed>, and <source>. I would like to know something more about it from you guys.

  • 5 Contributors
  • 5 Replies
  • 163 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Good starting list by and useful additions from , and . The practical issues you hit in the wild are usually not "which tag" but: how the file is delivered by the server, how browsers handle autoplay and cross-origin loads, how to provide accessible captions, and when to use advanced delivery (MSE/HLS/DRM) or canvas-based processing. Below are durable tips, common failure points and pointers to authoritative docs.

Delivery and playback checks you can do right away: verify the server sends the correct Content-Type and supports byte-range requests (so seeking works and players get 206 Partial Content) — see Range requests. Feature-detect codec support with canPlayType before offering a fallback canPlayType. Autoplay is commonly blocked on mobile; muted + playsinline is often required — see the MDN autoplay guide Autoplay guide. If media or caption files come from another origin, set crossorigin and the correct CORS headers server-side crossorigin attribute.

Accessibility and captions: use WebVTT for timed text and provide a transcript; browsers expect VTT served with text/vtt and will silently ignore invalid files or CORS-blocked requests — see the spec and track element docs WebVTT spec track element. Also ensure keyboard focus and ARIA labeling for custom controls.

Advanced notes and a quick canvas example: use Media Source Extensions (MSE) for adaptive/custom streaming or libraries (hls.js) for HLS on non‑Safari browsers; DRM needs EME Media Source Extensions. Canvas is handy for thumbnails, filters or frame-level processing. Example pattern to copy video frames into a canvas:

const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

video.addEventListener('play', function drawFrame() {
  if (video.paused || video.ended) return;
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(drawFrame);
});

When things break, first check the browser console and Network tab for CORS errors, 404s, wrong MIME types or missing 206 range responses—those are the usual culprits. For element-level details, the MDN media docs are a reliable reference.

Recommended Answers

All 5 Replies

Member Avatar for Dani

What else is there really to say?

Member Avatar for kamilkapeterson

<video> is an HTML5 element that allows you to embed video content on a web page. The <video> element supports multiple video formats, such as MP4, WebM, and Ogg. You can also use the <source> element within the <video> element to specify different video sources for different browsers.

<embed> is an HTML5 element that allows you to embed external content, such as videos, images, and flash animations, on a web page. It is often used to embed videos from popular video-sharing websites such as YouTube and Vimeo.

<source> is an HTML5 element that is used within the <video> and <audio> elements to specify different media sources for different browsers. This allows you to provide multiple versions of the same video or audio file in different formats, such as MP4 and WebM, and have the browser automatically choose the best one to play.

These elements are useful for embedding multimedia content on webpages, but it's important to note that not all web browsers support all video and audio formats. Therefore, it's best practice to provide multiple formats to ensure that your media can be played on as many browsers and devices as possible.

Edited by Dani because: Promotional link removed
Member Avatar for Stelian_1

I think there is also <canvas></canvas> that must be added to the list

Member Avatar for Dani

I'm not even quite sure if the OP is asking for a list of all HTML5 media elements, or more about the three he listed?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.