All Projects → video-dev → Hls.js

video-dev / Hls.js

Licence: other
HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Hls.js

HJPlayer
A HTML5 Player, can play flv and hls by Media Source Extension, based on typescript.
Stars: ✭ 149 (-98.62%)
Mutual labels:  player, streaming, hls, mediasource, http-live-streaming
Nginx Vod Module
NGINX-based MP4 Repackager
Stars: ✭ 1,378 (-87.23%)
Mutual labels:  stream, video-streaming, streaming, hls
shaka-player-react
A simple React component wrapper for shaka-player
Stars: ✭ 79 (-99.27%)
Mutual labels:  player, hls, playback, video-streaming
Awesome Video
A curated list of awesome streaming video tools, frameworks, libraries, and learning resources.
Stars: ✭ 397 (-96.32%)
Mutual labels:  player, video-streaming, streaming, hls
Rx Player
DASH/Smooth HTML5 Video Player
Stars: ✭ 600 (-94.44%)
Mutual labels:  player, video-streaming, streaming, html5
P2P-CKPlayer
嵌入P2P引擎的CKPlayer,视频网站省流量&加速神器
Stars: ✭ 49 (-99.55%)
Mutual labels:  player, hls, hlsjs
m3u8
Parse and generate m3u8 playlists for Apple HTTP Live Streaming (HLS) in Ruby.
Stars: ✭ 96 (-99.11%)
Mutual labels:  streaming, hls, http-live-streaming
Nexplayer unity plugin
Stream videos in HLS & DASH with Widevine DRM using NexPlayer Video Streaming Player SDK for Unity on Android & iOS devices
Stars: ✭ 73 (-99.32%)
Mutual labels:  player, streaming, hls
Movienight
Single instance video streaming server with integrated chat.
Stars: ✭ 387 (-96.41%)
Mutual labels:  stream, video-streaming, streaming
Openplayerjs
Lightweight HTML5 video/audio player with smooth controls and ability to play VAST/VPAID/VMAP ads
Stars: ✭ 255 (-97.64%)
Mutual labels:  player, hls, html5
Shaka Player
JavaScript player library / DASH & HLS client / MSE-EME player
Stars: ✭ 5,386 (-50.09%)
Mutual labels:  video-streaming, hls, playback
wsa
WSA(Websocket Streaming Agent) is a stream server target for mp4/h264 streaming over websocket
Stars: ✭ 35 (-99.68%)
Mutual labels:  streaming, stream, hls
P2P-DPlayer
DPLayer powered by CDNBye P2P Engine
Stars: ✭ 63 (-99.42%)
Mutual labels:  player, hls, hlsjs
api.video-go-client
The official Go client library for api.video
Stars: ✭ 16 (-99.85%)
Mutual labels:  streaming, hls, video-streaming
browserLiveStream
Use webcam, browser and Node to stream live video. From api.video (https://api.video)
Stars: ✭ 141 (-98.69%)
Mutual labels:  streaming, hls, video-streaming
Backoffice Administration
Stars: ✭ 89 (-99.18%)
Mutual labels:  stream, player, hls
Hlsjs P2p Engine
Let your viewers become your unlimitedly scalable CDN.
Stars: ✭ 759 (-92.97%)
Mutual labels:  player, hls, html5
Video.js
Video.js - open source HTML5 & Flash video player
Stars: ✭ 32,478 (+200.97%)
Mutual labels:  player, hls, html5
bigscreen-player
Simplified media playback for bigscreen devices
Stars: ✭ 62 (-99.43%)
Mutual labels:  player, playback, video-streaming
Youtube Extension
🔴YouTube Extension🧰>80 Features ⭐Please document, code or donate📌Tidy📌Longest-standing(2012)(Users>350000)⋮🎞️🎛️🎧⚙️🎬🔊☕🎨🧩🧪📈⏯️(Player: Repeat Screenshot Rotate; Hide related video distraction. Always expand video Description. Playback speed. Video Quality bandwidth H.264 electricity. Player Size Full Window. Themes Customization. Statistics. Reverse Playlist YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube YouTube Youtube enhancer YouTube app YouTube video YouTube YouTube YouTube api v3 YouTube playback YouTube player VP8 VP9 AV1 vidIQ tubebuddy download adblocker adblock ads sponsorblock addon youtube music ⭐ youtube premium css css4 html5 ytdl youtube-dl invidious iridium ParticleCore youtube+ youtube++ youtube-plus maia-yt youtube nonstop youtube control center vlogger vlog h264ify h264 m.youtube.com music.youtube.com studio.youtube youtube mobile youtube studio ⭐ kids Vanced gaming.youtube.com gaming youtubecenter freetube lite-youtube-embed newpipe youtube-dl-gui mps-youtube nuclear pytube awesome youtubers youtube downloader 8k 4k 60fps 30fps youtubeexplode vidgear k-lite tubebuddy adobe apple ios iphone design simplify ffmpeg premiere designer annoyance youtube upload
Stars: ✭ 1,027 (-90.48%)
Mutual labels:  player, streaming, playback

npm npm Sauce Test Status

HLS.js

HLS.js is a JavaScript library that implements an HTTP Live Streaming client. It relies on HTML5 video and MediaSource Extensions for playback.

It works by transmuxing MPEG-2 Transport Stream and AAC/MP3 streams into ISO BMFF (MP4) fragments. Transmuxing is performed asynchronously using a Web Worker when available in the browser. HLS.js also supports HLS + fmp4, as announced during WWDC2016.

HLS.js works directly on top of a standard HTML<video> element.

HLS.js is written in ECMAScript6 (*.js) and TypeScript (*.ts) (strongly typed superset of ES6), and transpiled in ECMAScript5 using Babel and the TypeScript compiler.

Webpack is used to build the distro bundle and serve the local development environment.

Features

  • VOD & Live playlists
    • DVR support on Live playlists
  • Fragmented MP4 container
  • MPEG-2 TS container
    • ITU-T Rec. H.264 and ISO/IEC 14496-10 Elementary Stream
    • ISO/IEC 13818-7 ADTS AAC Elementary Stream
    • ISO/IEC 11172-3 / ISO/IEC 13818-3 (MPEG-1/2 Audio Layer III) Elementary Stream
    • Packetized metadata (ID3v2.3.0) Elementary Stream
  • AAC container (audio only streams)
  • MPEG Audio container (MPEG-1/2 Audio Layer III audio only streams)
  • Timed Metadata for HTTP Live Streaming (in ID3 format, carried in MPEG-2 TS)
  • AES-128 decryption
  • SAMPLE-AES decryption (only supported if using MPEG-2 TS container)
  • Encrypted media extensions (EME) support for DRM (digital rights management)
  • CEA-608/708 captions
  • WebVTT subtitles
  • Alternate Audio Track Rendition (Master Playlist with Alternative Audio) for VoD and Live playlists
  • Adaptive streaming
    • Manual & Auto Quality Switching
      • 3 Quality Switching modes are available (controllable through API means)
        • Instant switching (immediate quality switch at current video position)
        • Smooth switching (quality switch for next loaded fragment)
        • Bandwidth conservative switching (quality switch change for next loaded fragment, without flushing the buffer)
      • In Auto-Quality mode, emergency switch down in case bandwidth is suddenly dropping to minimize buffering.
  • Accurate Seeking on VoD & Live (not limited to fragment or keyframe boundary)
  • Ability to seek in buffer and back buffer without redownloading segments
  • Built-in Analytics
    • All internal events can be monitored (Network Events, Video Events)
    • Playback session metrics are also exposed
  • Resilience to errors
    • Retry mechanism embedded in the library
    • Recovery actions can be triggered fix fatal media or network errors
  • Redundant/Failover Playlists

Supported M3U8 tags

For details on the HLS format and these tags' meanings, see https://tools.ietf.org/html/draft-pantos-hls-rfc8216bis-08

Manifest tags

  • #EXT-X-STREAM-INF:<attribute-list> <URI>
  • #EXT-X-MEDIA:<attribute-list>
  • #EXT-X-SESSION-DATA:<attribute-list>

The following properties are added to their respective variants' attribute list but are not implemented in their selection and playback.

  • VIDEO-RANGE and HDCP-LEVEL (See #2489)

Playlist tags

  • #EXTM3U
  • #EXT-X-VERSION=<n>
  • #EXTINF:<duration>,[<title>]
  • #EXT-X-ENDLIST
  • #EXT-X-MEDIA-SEQUENCE=<n>
  • #EXT-X-TARGETDURATION=<n>
  • #EXT-X-DISCONTINUITY
  • #EXT-X-DISCONTINUITY-SEQUENCE=<n>
  • #EXT-X-BYTERANGE=<n>[@<o>]
  • #EXT-X-MAP:<attribute-list>
  • #EXT-X-KEY:<attribute-list> (METHOD=SAMPLE-AES is only supports with MPEG-2 TS segments)
  • #EXT-X-PROGRAM-DATE-TIME:<attribute-list>
  • #EXT-X-START:TIME-OFFSET=<n>
  • #EXT-X-SERVER-CONTROL:<attribute-list>
  • #EXT-X-PART-INF:PART-TARGET=<n>
  • #EXT-X-PART:<attribute-list>
  • #EXT-X-PRELOAD-HINT:<attribute-list>
  • #EXT-X-SKIP:<attribute-list>
  • #EXT-X-RENDITION-REPORT:<attribute-list>

The following tags are added to their respective fragment's attribute list but are not implemented in streaming and playback.

  • #EXT-X-DATERANGE:<attribute-list> (Not added to metadata TextTracks. See #2218)
  • #EXT-X-BITRATE (Not used in ABR controller)
  • #EXT-X-GAP (Not implemented. See #2940)

Not Supported

For a complete list of issues, see "Top priorities" in the Release Planning and Backlog project tab. Codec support is dependent on the runtime environment (for example, not all browsers on the same OS support HEVC).

  • CMAF CC support #2623
  • Emsg Inband Timed Metadata for FMP4 (ID3 within Emsgv1) in "metadata" TextTracks #2360
  • #EXT-X-DATERANGE in "metadata" TextTracks #2218
  • #EXT-X-GAP filling #2940
  • #EXT-X-I-FRAME-STREAM-INF I-frame Media Playlist files
  • SAMPLE-AES with fmp4, aac, mp3, vtt... segments (MPEG-2 TS only)
  • PlayReady and FairPlay DRM ( See #3779 and issues labeled DRM)
  • Advanced variant selection based on runtime media capabilities (See issues labeled media-capabilities)
  • MP3 elementary stream audio in IE and Edge (<=18) on Windows 10 (See #1641 and Microsoft answers forum)

Server-side-rendering (SSR) and require from a Node.js runtime

You can safely require this library in Node and absolutely nothing will happen. A dummy object is exported so that requiring the library does not throw an error. HLS.js is not instantiable in Node.js. See #1841 for more details.

Getting started with development

First, checkout the repository and install the required dependencies

git clone https://github.com/video-dev/hls.js.git
cd hls.js
# After cloning or pulling from the repository, make sure all dependencies are up-to-date
npm install ci
# Run dev-server for demo page (recompiles on file-watch, but doesn't write to actual dist fs artifacts)
npm run dev
# After making changes run the sanity-check task to verify all checks before committing changes
npm run sanity-check

The dev server will host files on port 8000. Once started, the demo can be found running at http://localhost:8000/demo/.

Before submitting a PR, please see our contribution guidelines. Join the discussion on Slack via video-dev.org in #hlsjs for updates and questions about development.

Build tasks

Build all flavors (suitable for prod-mode/CI):

npm install ci
npm run build

Only debug-mode artifacts:

npm run build:debug

Build and watch (customized dev setups where you'll want to host through another server than webpacks' - for example in a sub-module/project)

npm run build:watch

Only specific flavor (known configs are: debug, dist, light, light-dist, demo):

npm run build -- --env dist # replace "dist" by other configuration name, see above ^

Note: The "demo" config is always built.

NOTE: hls.light.*.js dist files do not include EME, subtitles, CMCD, or alternate-audio support. In addition, the following types are not available in the light build:

  • AudioStreamController
  • AudioTrackController
  • CuesInterface
  • EMEController
  • SubtitleStreamController
  • SubtitleTrackController
  • TimelineController
  • CmcdController

Linter (ESlint)

Run linter:

npm run lint

Run linter with auto-fix mode:

npm run lint:fix

Run linter with errors only (no warnings)

npm run lint:quiet

Formatting Code

Run prettier to format code

npm run prettier

Type Check

Run type-check to verify TypeScript types

npm run type-check

Automated tests (Mocha/Karma)

Run all tests at once:

npm test

Run unit tests:

npm run test:unit

Run unit tests in watch mode:

npm run test:unit:watch

Run functional (integration) tests:

npm run test:func

Design

An overview of this project's design, it's modules, events, and error handling can be found here.

API docs and usage guide

Note you can access the docs for a particular version using "https://github.com/video-dev/hls.js/tree/deployments"

Demo

Latest Release

https://hls-js.netlify.com/demo

Master

https://hls-js-dev.netlify.com/demo

Specific Version

Find the commit on https://github.com/video-dev/hls.js/tree/deployments.

Compatibility

HLS.js is only compatible with browsers supporting MediaSource extensions (MSE) API with 'video/MP4' mime-type inputs.

HLS.js is supported on:

  • Chrome 39+ for Android
  • Chrome 39+ for Desktop
  • Firefox 41+ for Android
  • Firefox 42+ for Desktop
  • IE11 for Windows 8.1+
  • Edge for Windows 10+
  • Safari 8+ for MacOS 10.10+
  • Safari for ipadOS 13+

A Promise polyfill is required in browsers missing native promise support.

Please note: iOS Safari on iPhone does not support the MediaSource API. This includes all browsers on iOS as well as apps using UIWebView and WKWebView.

Safari browsers (iOS, iPadOS, and macOS) have built-in HLS support through the plain video "tag" source URL. See the example below (Using HLS.js) to run appropriate feature detection and choose between using HLS.js or natively built-in HLS support.

When a platform has neither MediaSource nor native HLS support, the browser cannot play HLS.

Keep in mind that if the intention is to support HLS on multiple platforms, beyond those compatible with HLS.js, the HLS streams need to strictly follow the specifications of RFC8216, especially if apps, smart TVs, and set-top boxes are to be supported.

Find a support matrix of the MediaSource API here: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

Using HLS.js

Installation

Prepackaged builds are included with each release. Or install the hls.js as a dependency of your project:

npm install --save hls.js

A canary channel is also available if you prefer to work off the development branch (master):

npm install hls.js@canary

Embedding HLS.js

Directly include dist/hls.js or dist/hls.min.js in a script tag on the page. This setup prioritizes HLS.js MSE playback over native browser support for HLS playback in HTMLMediaElements:

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent alpha version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script> -->
<video id="video"></video>
<script>
  var video = document.getElementById('video');
  var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
  // HLS.js is not supported on platforms that do not have Media Source
  // Extensions (MSE) enabled.
  //
  // When the browser has built-in HLS support (check using `canPlayType`),
  // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
  // element through the `src` property. This is using the built-in support
  // of the plain video element, without using HLS.js.
  //
  // Note: it would be more normal to wait on the 'canplay' event below however
  // on Safari (where you are most likely to find built-in HLS support) the
  // video.src URL must be on the user-driven white-list before a 'canplay'
  // event will be emitted; the last video event that can be reliably
  // listened-for when the URL is not on the white-list is 'loadedmetadata'.
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
  }
</script>

Alternative setup

To check for native browser support first and then fallback to HLS.js, swap these conditionals. See this comment to understand some of the tradeoffs.

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent alpha version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script> -->
<video id="video"></video>
<script>
  var video = document.getElementById('video');
  var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
  //
  // First check for native browser HLS support
  //
  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
    //
    // If no native HLS support, check if HLS.js is supported
    //
  } else if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
</script>

For more embed and API examples see docs/API.md.

CORS

All HLS resources must be delivered with CORS headers permitting GET requests.

Video Control

Video is controlled through HTML <video> element HTMLVideoElement methods, events and optional UI controls (<video controls>).

Player Integration

The following players integrate HLS.js for HLS playback:

They use HLS.js in production!

cdn77

Chrome/Firefox integration

made by gramk, plays hls from address bar and m3u8 links

License

HLS.js is released under Apache 2.0 License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].