Adds HLS playback support to video.js 5.0+ using hls.js library.
A pre-built version is available: https://cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js
Clone the repository.
Install the dependcies npm install.
Use npm run build to build the dist scripts.
Include video.js and videojs-hlsjs-plugin.js in your page:
<html>
<head>
<link href="http://vjs.zencdn.net/6.6.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/6.6.3/video.js"></script>
<script src="videojs-hlsjs-plugin.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 options = {
html5: {
hlsjsConfig: {
// Put your hls.js config here
}
}
};
// setup beforeinitialize hook
videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
// here you can interact with hls.js instance and/or video.js playback is initialized
});
var player = videojs('example-video', options);
</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.
const videojs = require('video.js');
const videojsHlsjsSourceHandler = require('videojs-hlsjs-plugin');
videojsHlsjsSourceHandler.register(videojs);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);
</script>Sometimes you may need to extend hls.js, or have access to the hls.js before playback starts. For these cases, you can register a function to the beforeinitialize hook, which will be called right after hls.js instance is created.
Your function should have two parameters:
- The video.js Player instance
- The hls.js instance
var callback = function(videojsPlayer, hlsjs) {
// do something
};
videojs.Html5Hlsjs.addHook('beforeinitialize', callback);You can remove the hook by:
videojs.Html5Hlsjs.removeHook('beforeinitialize', callback);In hls.js if caption positioning information is not provided in WebVTT it will be hard coded into a certain location on-screen. We provide a custom option to allow users to override property of the caption's cues: https://developer.mozilla.org/en-US/docs/Web/API/VTTCue
You can add as many beforeinitialize hooks as necessary by calling videojs.Html5Hlsjs.addHook several times.