Repository files navigation

An HLS plugin for video.jas based on hls.js

Videojs hls.js offers hls playback usinghls.js. For more details on browser compatibility see th hls.js github page.

• Getting Started
• Documentation
  • Dependencies
  • CORS Considerations
  • Options
  • Event Listeners
• Original Author

Download videojs-hlsjs and include it in your page along with video.js:

<videoid="video"preload="auto"class="video-js vjs-default-skin"controls><sourcesrc="http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8"type="application/vnd.apple.mpegurl"></video><scriptsrc="hlsjs.min.js"></script><scriptsrc="video.min.js"></script><scriptsrc="videojs-hlsjs.min.js"></script><script>varplayer=videojs('video',{// hlsjs tech should come before html5, if you want to give precedence to native HLS playback// use the favorNativeHLS option.techOrder:["hlsjs","html5","flash"]});</script>

There's also ademo of the plugin that you can check out.

• 1.4.5: Added text and audio tracks compatibility.

This project depends on:

• video.js 5.8.5+.
• hls.js 0.7.0+.

All HLS resources must be delivered withCORS headers allowing GET requests.

You may pass in an options object to the hls playback technology at player initialization.

Type:Boolean

When thefavorNativeHLS property is set totrue, the plugin will prioritize native hlsover MSE. Note that in the case native streaming is available other options won't have any effect.

Type:Boolean

When thedisableAutoLevel property is set totrue, the plugin will completely disable auto leveling based on bandwidth and remove it from the list of available level options.If no level is specified inhlsjs.startLevelByHeight orhlsjs.setLevelByHeight the plugin will start with the best quality available when this property is set to true.Useful for browsers that have trouble switching between different qualities.

Type:Number

When thestartLevelByHeight property is present, the plugin will start the video on the closest quality to thespecified height but the auto leveling will still be enabled unlesshlsjs.disableAutoLevel was set totrue. If height metadata is not present in the HLS playlist this property will be ignored.

Type:Number

When thesetLevelByHeight property is present, the plugin will start the video on the closest quality to thespecified height. The auto leveling will be disabled but it will still be selectable unlesshlsjs.disableAutoLevel was set totrue. If height metadata is not present in the HLS playlist this property will be ignored.

This property takes precedence overhlsjs.startLevelByHeight.

Typeobject

An object containing hls.js configuration parameters, see in detail:Hls.js Fine Tuning.

Exceptions:

• autoStartLoad the loading is done through thepreload attribute of the video tag. This property is always set tofalse when using this plugin.
• startLevel if you set any of the level options above this property will be ignored.

This plugin offers the possibility to attach a callback to any hls.js runtime event, see the documetationabout the different events here:Hls.js Runtime Events. Simply precede the name of the event in camel case byon, see an example:

varplayer=videojs('video',{hlsjs:{/**         * Will be called on Hls.Events.MEDIA_ATTACHED.         *         *@param {Hls} hls      The hls instance from hls.js         *@param {Object} data  The data from this HLS runtime event         */onMediaAttached:function(hls,data){// do stuff...}}});

This project was orginally forked from:videojs-hlsjs, credits to theoriginal author.