<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/8.0.0/video-js.css" rel="stylesheet"> </head> <body> <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"> <source src="https://example.com/path/to/video.m3u8" type="application/vnd.apple.mpegurl"> </video> <script src="https://vjs.zencdn.net/8.0.0/video.min.js"></script> <script> var player = videojs('my-video'); player.play(); </script> </body> </html>
: Install via npm using npm install hls.js or include it via a CDN. Basic Code : javascript hls-player
Once the HLS-Player reads the manifest, it begins requesting the video segments in order. Because segments are independent, the player can switch between quality levels between segments without interrupting playback. When a user presses "Play" on a video
When a user presses "Play" on a video stream, the HLS player coordinates a series of rapid background actions to ensure smooth media delivery. and "live" mode
HLS players operate in two primary modes: for video-on-demand (VOD), where the entire video is available from any point, and "live" mode , where new segments become available as time passes.
An HLS player typically consists of the following components:
: