You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Clone the repository.
Install the dependcies npm install.
Use npm run build to build the dist scripts.
Usage
CDN
Include video.js and videojs-hlsjs-plugin.js in your page:
<html><head><linkhref="https://vjs.zencdn.net/6.6.3/video-js.css" rel="stylesheet"><scriptsrc="https://vjs.zencdn.net/6.6.3/video.js"></script><scriptsrc="videojs-hlsjs-plugin.js"></script></head><body><videoid=example-videowidth=600height=300class="video-js vjs-default-skin" controls><sourcesrc="https://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8" type="application/x-mpegURL"></video><script>varoptions={html5: {hlsjsConfig: {// Put your hls.js config here}}};// setup beforeinitialize hookvideojs.Html5Hlsjs.addHook('beforeinitialize',(videojsPlayer,hlsjsInstance)=>{// here you can interact with hls.js instance and/or video.js playback is initialized});varplayer=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.
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>
Initialization Hook
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
varcallback=function(videojsPlayer,hlsjs){// do something};videojs.Html5Hlsjs.addHook('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.
