VideostoriSDK

Player SDK IntegrationMade Simple

Thank you for choosing the Videostori Player sdk for your platform. This guide will walk you through the integration process and the changes required to seamlessly embed the sdkinto your application.

Lightning Fast

Quick delivery times

Cost Effective

Maximum value

Flexible Scale

Any project size

Global Reach

Any language

Get Started with Videostori SDK

Seamlessly integrate AI-powered video generation into your applications. Our SDK supports multiple video formats and delivers professional results in record time.

Prerequisites

Before you begin integration, ensure you have the necessary credentials from Videostori to access the SDK for your desired environment. Contact our team to get your API key.

Supported Formats

WEBP
MOV
MP4
WMV

Delivery Times

Simple Videos1 Day
Ad Films3-4 Days
1

Installation

Add CSS Stylesheet

Include the stylesheet in your HTML <head> section:

<link rel='stylesheet' href='https://videostori.io/vsplayer/sdk/sdk.min.css' />

Add JavaScript SDK

Add the script before the closing </body> tag:

<script type='text/javascript' src='https://videostori.io/vsplayer/sdk/sdk.min.js'></script>

Create Video Container

Add a container element where the video player will be rendered:

<div id='video-container'></div>
2

Configuration

Configure the player using JavaScript with the following options. Choose between In-Stream and Out-Stream player types based on your needs:

In-Stream Player

Recommended
const inStreamOptions = {
  type: "INSTREAM",
  key: "your_api_key",
  floating: false,
  controls: true,
  autoplay: true,
  muted: true,
  bigPlayButton: true,
  preload: "auto",
  adResize: "16:9",
  sources: {
    src: "your-video-source",
    type: "video/mp4"
  },
  toggleAction: "muteUnmute",
  preRoll: "pre-roll-ad-url",
  midRoll: "mid-roll-ad-url",
  postRoll: "post-roll-ad-url",
  unmuteButton: {
    enableUnmute: true,
    unmuteButtonPosition: 'right',
    unmuteTimeout: 10
  },
  controlBarColor: "#6366F1",
  logo: {
    url: "your-logo-url",
    width: "90%",
    height: "100%",
    clickUrl: "https://your-website.com"
  }
};

renderVideoPlayer('video-container', inStreamOptions);

Out-Stream Player

const outStreamOptions = {
  type: "OUTSTREAM",
  key: "your_api_key",
  vastUrl: "your-vast-url",
  controls: true,
  floating: true,
  adResize: "16:9",
  controlBarOptions: [
    "ProgressControl",
    "PlayToggle",
    "VolumePanel"
  ],
  controlBarColor: "#6366F1"
};

renderVideoPlayer('video-container', outStreamOptions);
3

Complete Example

Full HTML Implementation

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Videostori Player Integration</title>
   <link rel='stylesheet' href='https://videostori.io/vsplayer/sdk/sdk.min.css' />
 </head>
 <body>
   <div class="container">
     <h1>My Video Player</h1>
     <div id='video-container'></div>
   </div>
   <script src='https://videostori.io/vsplayer/sdk/sdk.min.js'></script>
   <script>
     const options = {
       type: "INSTREAM",
       key: "your_api_key",
       sources: {
         src: "your-video-source.mp4",
         type: "video/mp4"
       },
       preRoll: "pre-roll-ad-url",
       midRoll: "mid-roll-ad-url",
       postRoll: "post-roll-ad-url"
     };

     renderVideoPlayer('video-container', options);
   </script>
 </body>
 </html>