Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

lahzenegar-videojs5-hlsjs-source-handler

Adds HLS playback support to video.js 5.0+ using Dailymotion's hls.js library.

readme

video.js HLS Source Handler

Adds HLS playback support to video.js 5.0+ using Dailymotion's hls.js library.

Installation

Clone the repository. Install the dependcies npm install. Use grunt buildto build the dist scripts.

Quality picker

Quality picker is integrated into this source handler. If you want to have quality selection menu in your player, call qualityPickerPlugin() method on video.js player right after initializing the player, like this:

var player = videojs('example-video');
player.qualityPickerPlugin();

Usage

Include video.js and videojs5-hlsjs-source-handler.js in your page:

<head>
    <link href="http://vjs.zencdn.net/5.0/video-js.min.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/5.0/video.min.js"></script>
    <script src="videojs5-hlsjs-source-handler.js"></script>
</head>

<body>
    <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
        <source src="http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8" type="application/x-mpegURL">
    </video>
    <script>
        var player = videojs('example-video');
        player.qualityPickerPlugin();
    </script>
</script>
</body>
</html>

There are several ways of getting video.js files, you can read about them in official documentation and choose the one that match your needs best.

Passing configuration options to hls.js

Define hlsjsConfig property in html5 field of video.js options object and pass it as second param to videojs constructor. List of available hls.js options is here:

<script>
    var options = {
        html5: {
            hlsjsConfig: {
                debug: true
            }
        }
    };
    var player = videojs('example-video', options);
    player.qualityPickerPlugin();
</script>

changelog

Change Log

All notable changes to this project will be documented in this file. This project adheres to Semantic Versioning.

[Dev]

[Unreleased]

0.1.2 - 2017-06-27

Changed

  • console.error replaced by console.warn for logging lack of hls.js support.

[0.1.0] - 2017-04-10

Changed

  • Depend on hls.js v0.6.21

[0.0.8] - 2016-08-11

Changed

  • Dumping full dependencies tree to package.lock

Fixed

  • Starting loading before play (now loads when media element requests data)

[0.0.7] - 2016-08-11

Fixed

  • Fix ci tools

[0.0.6] - 2016-08-11

Changed

  • Distribute preprod build in a specific no p2p bucket