Home  Web-development   Why we can ...

why we can not use HTML video tag to play HTTP HLS videos

You can use the HTML <video> tag to show videos in the browser, and it's actually a common practice for many use cases. However, the <video> tag alone doesn't support HTTP Live Streaming (HLS) out-of-the-box in all browsers, particularly older versions of browsers or those that don't have native HLS support.

Here are some key points to consider:

HTML5 <video> Tag Support for HLS

  1. Browser Support:

    • Safari: Native support for HLS.
    • Other Browsers (Chrome, Firefox, Edge, etc.): They don't have native support for HLS directly within the <video> tag. You need to use a JavaScript library like HLS.js to enable HLS playback in these browsers.
  2. HLS.js Library:

    • HLS.js is a JavaScript library that polyfills HLS support in browsers that don't natively support it. It works by intercepting the HLS stream and converting it into a format that the HTML5 <video> tag can play.

Example: Using HLS.js with <video> Tag

Here’s an example of how you can use the HTML5 <video> tag with HLS.js to ensure HLS playback in all major browsers:

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HLS Video Player</title>
  <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
  <script src="https://unpkg.com/hls.js@latest"></script>
</head>
<body>
  <div>
    <video id="video" controls width="640" height="360"></video>
  </div>
  <script>
    const video = document.getElementById('video');
    const videoSrc = 'http://localhost:8000/streams/playlist.m3u8';

    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(videoSrc);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function () {
        video.play();
      });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc;
      video.addEventListener('loadedmetadata', function () {
        video.play();
      });
    }
  </script>
</body>
</html>

Explanation

Why Use JavaScript Libraries Like HLS.js

Published on: Jul 05, 2024, 11:46 AM  
 

Comments

Add your comment