Creative Services Toolkit

Documentation

CS Video Player v2 Documentation

Get help with setup, functionality, and troubleshooting.

Click for Demo

Setup

The CS Video player is designed as a fully interactive player, with features to accomodate all the normal requests for video is our advertising. If you only need a simple HTML video player click here

  • videoWrapper is the div the video player will be loaded into
  • Include the javascript script tag to include the player core code

  • options tells the player how it should function
    • videoContainer - HTML element where the video player will be injected into.
      Default: $(".videoWrapper")
      Value: jQuery object
    • muted - starts the player muted
      Default: true
    • autoplay - starts the video playing once it is loaded
      Default: true
    • showControls - shows the default browser-based video controls when the video is hovered over.
      Default: true
      Conditions: If set to false the controls will not show unless you use javascript to make them show.
    • userOverlayButtons - use the buttons that go over the video, like Play With Sound
      Default: true
      Conditions: If true you must define which buttons to use in overlayBtns
    • overlayBtns - A list of the buttons to use in the overlay area
      Default: Play Audio and Replay buttons
      Conditions: Will only display buttons if useOverlayButtons is set to true. Instructions: you can set a button to show text by putting text inside quotes, like "Replay" - or you can use an image by putting the URL inside the quotes.
    • loopThruPlaylist - Autoplays the next video in the list when one ends.
      Default: true
    • Videos - An array of all the videos to use in the player.
      See below for setup details for each video in the player
      • name - Name of the video.
        Value: A name describing the video. This will be used in Automated Tracking.
      • sources - Video files for this video.
        Default: URL to mp4 file
        Value: include as many video source files for this video as you have types. Example: blah.mp4, blah.webm
      • poster - URL for the poster image
      • Thumbnail - Details that will be used to create a thumbnail if there is more than 1 video in the player
        image - A URL to an image to use in the thumbnail. Set this to null if not used.
        text - Text to include as part of the thumbnail. Set this to null if not used.
        click - 3rd party click tag would go here. Set this to null if not used.
      • tracking - A list of tracking to be used for this video.
        Default: ""
        Value: leave quotes empty if using automated tracking. If using 3rd party tracking paste 1x1 URLs inside quotes.
    • Optional Options: Add any of these to your options to add functionality
    • startVideo - Sets which video the player should start on, if multiple videos are used in the player.
      Default: 1
      Value: A number.
    • videoSetup - Calls a function when the video is done setting itself up. This is useful for when you want to add click events to thumbnails or play-with-audio buttons etc.
      Value: Name of a function, without (), like myVideoSetup
      Instructions: Don't forget to actually make a function with the name you specify.
    • videoEnd - Calls a function when the video is done playing.
      Value: Name of a function, without (), like myVideoEnd
      Instructions: Don't forget to actually make a function with the name you specify.
  • window.video1 = new CS_videoPlayer(options) creates a new CS Video Player and assigns it to the video1 variable
    This allows you to call functions that are defined inside the CS Video Player, such as window.video1.unmute("restart") to restart the video unmuted. For a full list of available functions see the Function Section below

Functions

These functions are available as part of the CS Video Player. You can call them by using the variable that you assigned the new CS Video Player too, like window.video1

Load Video / Change to another video in playlist

Play video, or Restart

Pause video

Mute video

Unmute video, or Restart Unmuted

Get the current video.

Get the thumnails

Get the controls (overlay buttons like play audio)

Set Poster Image

See which events are being tracked by the player