☰
Navigation :

Clean Video.js Installation

Notes up front

Caching

Please do not cache the following files:

These files are generated and adjusted on-demand. Variables such as android and is_mobile are determined by the user-agent and can thus differ on a per-request basis.

URL’s

The production URL that should be used is as follows:

It’s available both on HTTP and HTTPS.

Files

The following two files should always be included:

These files contain Video.js itself, the plugins and the CSS for both Video.js and the plugins.

The following files should be included on a per-case basis:

REST API implementation

Using the REST API implementation allows you more freedom in how you implement Video.js, this flexibility does mean however that incompatibilities can occur. If you want to be safe from these, you can also implement ‘our’ implementation yourself.

That being said, if you’re using this implementation you need to call the following URL for VOD content:

//vod-vip.streaming.in2ip.nl/dorcel_vj/dorcel-rest.js

Returned data

var vjParams ={
   "hls_prefix":"http:\/\/vod-vip3.streaming.in2ip.nl\/vod\/_definst_\/smil:smil\/",
   "hls_suffix":".smil\/playlist.m3u8",
   "rtsp_prefix":"rtsp:\/\/vod-vip4.streaming.in2ip.nl\/vod\/_definst_\/",
   "rtsp_suffix":"_500.mp4",
   "thumb_prefix":"\/\/vod-vip1.streaming.in2ip.nl\/thumbs\/",
   "android":false,
   "override_native":false,
   "flash_enabled":false,
   "is_mobile":false,
   "strip_cors":false
};

And this URL for LIVE content:

//vod-vip.streaming.in2ip.nl/dorcel_vj/dorcel-rest-live.js

Returned data

var vjParams ={
   "hls_prefix":"http:\/\/vod-vip4.streaming.in2ip.nl\/dorcel-live\/_definst_\/smil:smil\/",
   "hls_suffix":".smil\/playlist.m3u8",
   "rtsp_prefix":"rtsp:\/\/vod-vip3.streaming.in2ip.nl\/dorcel-live\/_definst_\/",
   "rtsp_suffix":"_350.mp4",
   "android":false,
   "override_native":false,
   "flash_enabled":false,
   "is_mobile":false,
   "strip_cors":false
};

Important: Please check the ‘Notes’ section for additional information.

With the data returned by these URL’s and the token that is obtained by other means, Video.js can be implemented. You can use the following example from the dorcel.js file:

fallback_prefix = "hls_prefix";
fallback_suffix = "hls_suffix";

function showPlayer(element, token, width, height, onComplete) {
	if(typeof(onComplete)==='undefined') onComplete = null;
        if (android) {
                document.getElementById('playerMessage').innerHTML = '<a href="'+fallback_prefix+token+fallback_suffix+'">click for video</a>.<br />If the previous link did not work, please try <a href="#" onClick="android=false; showPlayer(\''+element+'\', \''+token+'\', \''+width+'\', \''+height+'\', \''+onComplete+'\'); return true;">this link</a>.';
                // document.location = fallback_prefix+token+fallback_suffix;
        } else {
                if (override_native) {
                  videojs.options.hls.overrideNative = true;
                  videojs.options.html5.nativeAudioTracks = false;
                  videojs.options.html5.nativeVideoTracks = false;
                }
                if (flash_enabled) {
                  videojs.options.flash.swf = "//vod-vip.streaming.in2ip.nl/dorcel_vj/videojs.swf"
                }
                if (strip_cors) {
                        document.getElementById(element).removeAttribute("crossorigin");
                }
                console.log(override_native);
                var player = videojs(element, {"controls": true,
                              "autoplay": true,
                              "preload": "auto",
                              "width": width,
                              "height": height,
                              "nativeControlsForTouch": is_mobile,
                              "sources": [{type: 'application/x-mpegurl', src: hls_prefix+token+hls_suffix}],
                              "plugins": {
                                  videoJsResolutionSwitcher: {
                                  }}
                              }, function(){
                              this.thumbnails({basePath : thumb_prefix});
                              });
                                console.log(thumb_prefix+token+'.vtt');
                player.ready(function() {
                  player.nativeTextTracks = false;
                  var thumbnail_track = {
                    kind: 'metadata',
                    src: thumb_prefix+token+".vtt",
                    srclang: 'en',
                    label: 'English',
                    default: 'default'
                  };
                  player.addRemoteTextTrack(thumbnail_track, true);
                });
                player.on('ended', onComplete);
                console.log(hls_prefix+token+hls_suffix);
        }
}

Next you should create two HTML objects, for example:

<span id="playerMessage"></span>
<video id="myPlayer" class="video-js vjs-default-skin vjs-big-play-centered" crossorigin="anonymous"></video>

Then to initialise the player you should call the showPlayer() function with the appropriate arguments.

If you’re going this route, you are of course free to change it however you feel. The documentation for Video.js itself can be found here.

Notes

There are a couple of notes regarding the REST call:

‘Include’ implementation

This implementation allows you to include a couple of files and call a function on an empty VIDEO object that you put on the page somewhere. The disadvantage of this method is that you cannot change anything about the player’s Javascript, since it is loaded from our servers. If you would like more freedom in this regard, please have a look at the REST API implementation.

You should put the following lines on your page:

File inclusion

<link rel="stylesheet" href="//vod-vip.streaming.in2ip.nl/dorcel_vj/videojs.min.css" />
<script type="text/javascript" src="//vod-vip.streaming.in2ip.nl/dorcel_vj/videojs.min.js" ></script>
<script type="text/javascript" src="//vod-vip.streaming.in2ip.nl/dorcel_vj/dorcel.js" ></script>

Player object

<span id="playerMessage"></span>
<video id="myPlayer" class="video-js vjs-default-skin vjs-big-play-centered" crossorigin="anonymous"></video>

Note: You can fill in a message in the playerMessage span to show a message before the player is loaded.

After including these files and creating the player object you can call the showPlayer() function. It takes the following arguments:

function showPlayer(element, token, width, height, onComplete)

element: The element that Video.js should create the Video.js player on. Should match myPlayer.
token: The streaming token.
width: The width of the player.
height: The height of the player.
onComplete: The function that should be called when the video is done playing (You can leave this empty if you don’t want to use it).

After calling the function, the player should appear!