Skyline CLSP VideoJS Plugin
A videojs
plugin that adds support for video served over the clsp
protocol, which is a proprietary near-real-time video streaming protocol only available via Skyline's SFS solutions.
clsp
protocol support is provided by https://github.com/skylineos/clsp-player.
Note that if you do not specifically need video.js
, we recommend you use clsp-player
as it is more performant and has better memory management.
Table of Contents
Supported Browsers
This plugin can only support browsers that are supported by the clsp-player
. See https://github.com/skylineos/clsp-player for the list of supported browsers.
URL Structure
See https://github.com/skylineos/clsp-player for the URL structure for clsp
stream URLs.
Installation
Via Yarn
yarn add @babel/polyfill @skylineos/videojs-clsp
Via NPM
npm i @babel/polyfill @skylineos/videojs-clsp
Using with dist
assets
NOTE: See demos/simple-dist/
and demos/advanced-dist/
for full examples.
NOTE: @babel/polyfill
, video.js
, videojs-errors
MUST be sourced/included prior to the plugin.
<head>
Tag
<head>
<link
rel="stylesheet"
href="/path/to/dist/videojs-clsp.css"
>
<script
type="text/javascript"
src="//cdn.jsdelivr.net/npm/@babel/polyfill@7.8.7/dist/polyfill.min.js"
></script>
<script
type="text/javascript"
src="//vjs.zencdn.net/7.7.5/video.min.js"
></script>
<script
type="text/javascript"
src="//cdn.jsdelivr.net/npm/videojs-errors@4.3.2/dist/videojs-errors.min.js"
></script>
<head>
<script>
Tag
<script src="/path/to/dist/videojs-clsp.min.js"></script>
<script>
var player = window.videojs('my-video');
if (window.clspUtils.supported()) {
window.player.clsp();
}
window.player.on('ready', function () {
setTimeout(function () {
window.player.play();
});
});
</script>
<video>
tag
NOTE: with clsp-player
, it is recommended that you have an "extra" container element wrapping your video element. When using video.js
, a wrapper element will be created for you, so the extra one is not needed.
Note that for clsp
streams, the src
tag must have a type
attribute with a value of video/mp4; codecs='avc1.42E01E'
.
<div class="video-container">
<video
id="my-video"
class="video-js vjs-default-skin"
controls
>
<source
src="clsp://172.28.12.57/FairfaxVideo0510"
type="video/mp4; codecs='avc1.42E01E'"
/>
<source
src="http://172.28.12.57:1935/rtplive/FairfaxVideo0510/playlist.m3u8"
type="application/x-mpegURL"
/>
</video>
</div>
Using with src
assets
NOTE: See demos/simple-src/
and demos/advanced-src/
for full examples.
NOTE: @babel/polyfill
, video.js
, videojs-errors
MUST be sourced/included prior to the plugin.
JS
import '@babel/polyfill';
import videojs from 'video.js';
import videojsErrors from 'videojs-errors/dist/videojs-errors.es';
import clspUtils from '@skylineos/videojs-clsp/src/js/utils';
import clspPlugin from '@skylineos/videojs-clsp/src/js/plugin';
clspPlugin().register();
const player = videojs('my-video', {
autoplay: true,
muted: true,
preload: 'auto',
controls: false,
sources: [
{
src: 'clsp://172.28.12.57/FairfaxVideo0510',
type: "video/mp4; codecs='avc1.42E01E'",
},
{
src: 'http://172.28.12.57:1935/rtplive/FairfaxVideo0510/playlist.m3u8',
type: 'application/x-mpegURL',
},
],
});
if (clspUtils.supported()) {
player.clsp();
}
Styles (SASS)
@import '/path/to/node_modules/@skylineos/videojs-clsp/src/styles/videojs-clsp.scss';
Webpack
@todo
Dependencies
@babel/polyfill
7.8.7
is required.
video.js
7.7.5
is the recommended version. Version 6.x
is not recommended due to it being less performant over time.
We recommend using videojs-errors
. Version 4.3.2
is recommended, because as of version 4.2.0
, it allows us to re-register successive errors to respond to successfive failures as necessary to support stream recovery.