Documentation
v0.4.0
iOSAndroidJavaScript

Setup

You can include the SDK on your page in several ways, depending on your needs:

If you load the SDK asynchronously, you can use global function vAsyncInit, that will be called when the SDK is loaded.

window.vAsyncInit = function() {
    // Using of V SDK
};

After that SDK will be available into global object as V or if you use AMD/CommonJS modules, it will be available as module named V.

Account

To start using the SDK you need to initialize it with your application ID and session token, we have V.account service for these purposes. Also V.account allows you control session on the V platform during usage of the SDK. You can initialize the SDK using V.account.init method.

V.account.init({
    appId: 'YOUR_APP_ID',
    sessionToken: 'YOUR_SESSION_TOKEN'
});

Or you can do that by passing of initialization parameters to the script source.

<script type="text/javascript" src="https://cdn.video.io/js/latest/v.js?appId=YOUR_APP_ID&sessionToken=YOUR_SESSION_TOKEN"></script>

Session token should be generated by your server using secret key of your application and V server API. Alternatively, if you don't have your own server yet, but you want to try SDK, you can use your secret token for authorization in JavaScript SDK, by passing of secretToken parameter to script source or by passing it to V.account.init method.

V.account.init({
    appId: 'YOUR_APP_ID',
    secretToken: 'YOUR_SECRET_TOKEN'
});
You can use secret token in the client SDKs only for testing or development purposes and should never used it in production.

For more details about V.account properties, methods and event see its API reference.

Videos

V.videos service is responsible for management of you application videos. Using this service you can fetch, create, update, delete or subscribe on new videos from the server API. For more details see API reference.

UI components

UI components are responsible for representation of V platform content.

To create UI components you could use V.ui method

V.ui(componentName, containerElement, settings);

or special HTML tags, e.g.:

<v-player data-loop="true" data-video="{id: 'VIDEO_ID', ...}" />

These HTML tags will be initialized automatically when SDK and DOM is loaded. If you inserted UI component tag after page loading, then you need to call V.ui.init method to let SDK know that you inserted new tag, that should be initialized. Settings of UI component for custom HTML tags should be passed as data attributes.

List of components

Name Tag name Description
player v-player Player component allows you to playback single video
playlist v-playlist Playlist component allows you to playback list of videos with smart preloading
upload v-upload Upload component allows you to upload new videos
qrcode v-qrcode QR code component allows you to record new videos using mobile SDK

For more information about functionality, settings, methods and events of each UI component see API Reference.

Async methods

Most of components of the SDK contain methods and some of them can be asynchronous. All such methods return promise object in accordance with Promises/A+ specification.

Example

V.videos
    .get('55533943-6534-6400-09d3-000000000000')
    .then(function(data) {
        // Do something with data
    })
    .catch(function(data) {
        // Do something with data
    });

If you prefer to use callback function, you can pass it as the last argument of async methods, and when execution completes, callback function will be called with response object. Response object has 2 properties:

Example

V.videos.get('55533943-6534-6400-09d3-000000000000', function(response) {
    if (response.success === true) {
        // Do something with response.data
    } else {
        // Do something with response.data
    }
});

Events

Services and UI components of the SDK can trigger events for more convenient interaction with them. All services and instances of UI components have subscribe and unsubscribe methods, which take 2 arguments:

Callback function will be called with 2 arguments:

Examples

Subscription on particular event

V.account.subscribe('init', function(eventName) {
    // Do something
});

Subscription on token namespace

V.account.subscribe('token', function(eventName) {
    if (eventName === 'token.update') {
        // Do something
    } else if (eventName === 'token.expire') {
        // Do something
    }
});

Subscription on all events from UI component

var player = V.ui('player', 'v-player-container', settings);

player.subscribe('*', function(eventName, data) {
    // Do something
});

Full list of events and their data for each component can be found in API Reference.