@montevideo-tech/videojs-cmcd

v1.0.9

Published

a year ago

Adds CMCD data to the player requests

Downloads

3,185

0High
0Medium
0Low

videojs videojs-plugin

A video.js plugin for adding Common-Media-Client-Data (CMCD) to the player requests.

NOTE: This plugin only works for VideoJs 8.4.0 and above.

Content

Installation and Usage

Vanilla Javascript

This is the simplest case. Get the script in whichever way you prefer and include the plugin after you include video.js, so that the videojs global is available. Yoy can copy paste the next <script> tag


<script  src='https://cdn.jsdelivr.net/npm/@montevideo-tech/videojs-cmcd@latest/dist/videojs-cmcd.min.js'></script>

Then you will have to initalize the plugin after the creation of the player.


<script>


var player = videojs('my-video');

player.cmcd({sid:'SessionID', cid:'ContentID'});

</script>

NOTE: You can use the instance of the plugin to set the CID and SID parameters as it's shown above.

To include CMCD data in the request headers instead of query arguments, simply set the 'useHeaders' configuration value to 'true' when initializing the plugin. By default, CMCD data is transmitted via query arguments.


<script>


var player = videojs('my-video');

player.cmcd({sid:'SessionID', cid:'ContentID', useHeaders: true});

</script>

This is a complete example of the plugin.


<html>


<head>

<title>videojs-cmcd demo</title>

<link  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/video-js.min.css"  rel="stylesheet">

</head>

  

<body>

<video  id="videojs-cmcd-player"  class="video-js vjs-default-skin"  controls></video>

  

<script  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/video.min.js"></script>

<script  src="https://cdn.jsdelivr.net/npm/@montevideo-tech/videojs-cmcd@latest/dist/videojs-cmcd.min.js"></script>

<script>

// Init the palyer

var  player = videojs('videojs-cmcd-player');

  

// Init the CMCD Plugin

player.cmcd({sid:'SessionID', cid:'ContentID'});

// Load a video

player.src("https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8");

</script>

</body>

  
</html>

NPM

Install the plugin using npm in your project.


npm  i  @montevideo-tech/videojs-cmcd

Usage

To use the plug-in, instance the player and then initialize it.


import  videojs  from  'video.js';
import  '@montevideo-tech/videojs-cmcd'
  
var  player = videojs('videojs-cmcd-player');

player.cmcd({sid:'SessionID', cid:'ContentID'});

NOTE: You can use the instance of the plugin to set the CID and SID parameters as it's shown above.

You can also use the plugin function SetId() to set a Session ID or a Content ID dinamically.

player.cmcd().setId({sid: 'SessionID', cid: 'ContentID'});

NOTE: If you don't provide a SID and CID, the plugin will automatically generate them (A hash code for CID and a UUID for SID). You can retrieve any of them by instancing "player.cmcd().sid" or "player.cmcd().cid" respectively.

CMCD Standard implementation status

This table provides information about the CMCD keys, how they are obtained, the difficulty of doing so and if they are implemented or even required.

Contributing

We welcome contributions from the community. To contribute to the project, follow these steps:

Fork the repository.
Check the active issues and project board to see what we're working on.
Create a new branch for your feature or bug fix.
Make your changes.
Submit a pull request.

Setup your development environment

Install all the packages dependencies: npm install
Build the plugin and keep watching for changes in the source code: npm run start
Open in a browser the index.html to test your changes in the code. Remember to refresh the page each time you make a change in the source code.
The index.html page has the cmcd-validator installed, open the console of your browser to find errors in the CMCD implementation.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme