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
-
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.
-
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.
- 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
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
- HLS.js Library: The script tag includes the HLS.js library from a CDN.
- Video Tag: The
<video>
element is defined withcontrols
to show playback controls. - JavaScript:
- Hls.isSupported(): Checks if the browser supports HLS via HLS.js.
- Hls() Instance: Creates a new instance of HLS.js and attaches it to the video element.
- Manifest Parsed Event: Once the HLS manifest is parsed, the video is played.
- Native HLS Support Check: For browsers like Safari that natively support HLS, the video source is directly set.
Why Use JavaScript Libraries Like HLS.js
- Browser Compatibility: Ensures your HLS streams work across all major browsers, not just those with native HLS support.
- Advanced Features: Libraries like HLS.js provide additional features like adaptive bitrate streaming, error handling, and custom buffer management, enhancing the video playback experience.
Published on: Jul 05, 2024, 11:46 AM