VidCaster Video Player Dynamic API

BACKGROUND
The Vidcaster video player is a hosted, HTML5 compliant video player with Flash-compatible fallback based on a customized version of the open-source video.js video player API. Vidcaster is a strong proponent of standards-based video technologies and is an active contributor to the video.js project.

Compared to a self-hosted solution, the Vidcaster video player is much easier to maintain -- you can embed the iframe code only once in a website and it will be constantly updated automatically and new features are included with no changes needed by users at any time. When using the Vidcaster embed system you can even swap out third-party video players in the future without changing the original embed codes. This is crucial if you allow and encourage your users to embed your videos in other websites that you do not control -- it is important to have the ability to continually update the video player in the future which Vidcaster gives you.

HOW IT WORKS
The Vidcaster video player is constructed via a simple iframe embed code, just like YouTube, Vimeo and other best-practice video platforms. This iframe code can be embedded in any website and will accept parameters to customize the behavior of the player, exposing a powerful feature set underneath.

HOW TO ACCESS A VIDEO'S EMBED CODE AUTOMATICALLY
There are a few simple ways to access a Vidcaster video player embed code:

  • While viewing the video with the Vidcaster player (either a published video on its public playback page or in the private Edit Video settings page) you can simply click the "Share" icon which will reveal an automatically generated embed code which you can copy and paste.
  • On the Manage Videos page click "Share" which will lead to a page with embed information that you can copy and paste.
  • Please note that YouTube-powered Vidcaster accounts do not have a Vidcaster embed code since they are using the YouTube player.

HOW TO MANUALLY CONSTRUCT A VIDCASTER VIDEO PLAYER EMBED CODE
Here is an example of a typical Vidcaster video player embed object:

<iframe id="video-player" title="YourSite.com Video
Player" width="640" height="360"
src="http://yoursite.com/player/4Kki/" frameborder="0"
webkitallowfullscreen mozallowfullscreen
allowfullscreen></iframe>

When creating a manual embed code for a Vidcaster video, required attributes of the iframe tag are width, height and src. The remaining attributes are optional but highly recommended: frameborder=0 ensures correct rendering on older browsers, and webkitallowfullscreen mozallowfullscreen allowfullscreen ensure proper HTML5 fullscreen support in newer browsers.

MODIFY PLAYER BEHAVIOR WITH IFRAME AND URL PARAMETERS
The Vidcaster video player is a dynamic API an iframe object which can be sized to any configuration depending on need and its behavior changed with URL attributes.

Changing the size of the video player is as simple as changing the height and width parameters in the iframe tag.

There are a few actions that can be specified as parameters in the iframe src URL that modify player look and behavior, and more on the way soon. Available parameters include:

  • native - This indicates to the player that it should adopt behavior appropriate for playback in a Vidcaster playback page. For example, it will hide the "info bar" that includes video metadata since this information is available in the playback page surrounding the player object.
  • embed - This indicates to the player that it should adopt behavior appropriate for playback outside of a Vidcaster playback page, in a stand-alone fashion. For example, this will ensure that the "info bar" that includes video metadata such as Headline and Category will be included in the player.
  • autoplay - This action forces the player to begin playing video as soon as the object has loaded.

A Vidcaster player URL request is constructed as follows: http://[yourvidcastersite.com]/player/[video_short_code]/embed/[action2]/[action3]/

For example, if you would like to construct a Vidcaster player with default embed behavior and begin playing the video upon page load, you would want to include embed and autoplay actions. Here is a real example:

<iframe id="video-player" title="AirbnbTV Video Player"
width="640" height="360"
src="http://tv.airbnb.com/player/4Kki/embed/autoplay/"
frameborder="0" webkitallowfullscreen mozallowfullscreen
allowfullscreen></iframe>