Adds HLS playback support to [video.js 5.0+](https://github.com/videojs/video.js) using [hls.js library](https://github.com/video-dev/hls.js/).
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:
var callback = function(videojsPlayer, hlsjs) {
// do something
};
videojs.Html5Hlsjs.addHook('beforeinitialize', callback);
You can remove the hook by:
videojs.Html5Hlsjs.removeHook('beforeinitialize', callback);
You can add as many beforeinitialize hooks as necessary by calling videojs.Html5Hlsjs.addHook several times.
FAQs
Adds HLS playback support to [video.js 5.0+](https://github.com/videojs/video.js) using [hls.js library](https://github.com/video-dev/hls.js/).
The npm package hls-vjs receives a total of 1 weekly downloads. As such, hls-vjs popularity was classified as not popular.
We found that hls-vjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.