RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/streamroot/videojs-hls.js below:

streamroot/videojs-hlsjs-plugin: hls.js Source Handler for video.js 5

video.js HLS Source Handler

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

Manually build the plugin

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);

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);
</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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4