A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/jwplayer/hls.js below:

GitHub - jwplayer/hls.js: MSE-based HLS client

Join the discussion via video-dev.org in #hlsjs (our Slack channel)

hls.js is a JavaScript library which 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. This transmuxing could be performed asynchronously using Web Worker if available in the browser. hls.js also supports HLS + fmp4, as announced during WWDC2016

hls.js does not need any player, it 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 the TypeScript compiler.

Modules written in TS and plain JS/ES6 can be interdependent and imported/required by each other.

To build our distro bundle and serve our development environment we use Webpack.

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

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

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

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

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

As of today, hls.js is supported on:

Please note: iOS Safari (iPhones) 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) do however have built-in HLS support through the plain video "tag" source URL. See the example below (Getting Started) 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, you will not be able to 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

<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>

Note that the example code above will check for hls.js support first and then fallback to check if the browser natively supports HLS. If you want to check for native browser support first, and then fallback to Hls.js you will want to swap those conditionals.

The order of these checks depends on if you want to use hls.js whenever possible 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>

Video is controlled through HTML <video> element.

HTMLVideoElement control and events could be used seamlessly.

They use hls.js in production!

hls.js is (being) integrated in the following players:

Chrome/Firefox integration

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

No external JS libs are needed. Prepackaged build is included with the releases.

If you want to bundle the application yourself, use node

or for the version from master (alpha)

NOTE: hls.light.*.js dist files do not include subtitling and alternate-audio features.

Either directly include dist/hls.js or dist/hls.min.js

Or type

npm install --save hls.js

Optionally there is a declaration file available to help with code completion and hinting within your IDE for the hls.js api

npm install --save-dev @types/hls.js
Server-side-rendering (SSR) and require from a Node.js runtime

We support this now. You can safely require this library in Node and absolutely nothing will happen :) See video-dev#1841

(This is also known as "Universal builds" and "isomorphic apps")

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

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

Manifest tags

Playlist tags

hls.js is released under Apache 2.0 License

Development and contributing - first steps

Pull requests are welcome. Here is a quick guide on how to start.

git clone https://github.com/video-dev/hls.js.git
# setup dev environment
cd hls.js
npm install
# runs dev-server for demo page (recompiles on file-watch, but doesn't write to actual dist fs artifacts)
npm run dev
# lint
npm run lint

After cloning or pulling from the repository, first of all, make sure your local node-modules are up-to-date with the package deps:

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

npm install
npm run build

Only debug-mode artifacts:

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

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.

Build with bundle analyzer (to help optimize build size)

Run linter:

Run linter with auto-fix mode:

Run linter with errors only (no warnings)

Automated tests (Mocha/Karma)

Run all tests at once:

Run unit tests:

Run unit tests in watch mode:

Run functional (integration) tests:

Click here for details.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4