Note: This plugin is useless without the CDN prefetching code, that has to run on the CDN.
videojs-cdn-prefetch
Prefecth media segments to the CDN point of presence (POP) used by the player, this improves the viewer experience (basically reduces the chances of buffering). This feature is specially interesting when your origin is very far from that viewer and the stream is not very popular on that CDN POP.
This plugin also needs CDN code to interpret the prefechting requests. That code could be implemented in VCL Fastly or inside Lambda edge CloudFront
This code detects the parameters pr_url
inside the querystring of the HLS media chunks requests and sends a GET request to those URL adding few params that allows the CDN POP to prefect that data. Example:
Chunk URL:
Test_00028.ts?pr_url=Test_00029.ts,Test_00030.ts&foo=bar
In the previous example, before fetching the segment Test_00028.ts
this plugin will send 2 GET requests (to: Test_00029.ts
, and Test_00030.ts
) with the following QS parameter ?pf=1
, in the CDN side we need to interpret this code and execute the prefecthing.
Installation
npm install --save videojs-cdn-prefetch
Usage
To include videojs-cdn-prefetch on your website or web application, use any of the following methods.
<script>
Tag
This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs
global is available.
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-cdn-prefetch.min.js"></script>
<script>
var player = videojs('my-video');
player.cdnPrefetch();
</script>
Browserify/CommonJS
When using with Browserify, install videojs-cdn-prefetch via npm and require
the plugin as you would any other module.
var videojs = require('video.js');
// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-cdn-prefetch');
var player = videojs('my-video');
player.cdnPrefetch();
RequireJS/AMD
When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require
the plugin as you normally would:
require(['video.js', 'videojs-cdn-prefetch'], function(videojs) {
var player = videojs('my-video');
player.cdnPrefetch();
});
License
GPL-3.0. Copyright (c) Jordi Cenzano <jordi.cenzano@gmail.com>