Configuring OptinPlayer

OptinPlayer has a very extensive list of properties and methods available which are extremely easy to use. Nearly all of these can be left out of the player embed code and they will assume default values. This section gives details of setting up the player with some of the most commonly required options.

A video can be either 'embed' type or 'popup' type and a single property 'type' is used to set this. There are some properties which apply to both types, and some for only embed or popup type.


Basics of embedded or popup video

A new player instance is added with the following minimalist code:

new oplayer('myVideo').initialize(
   {
      'content' : 'oplayer',
      'type' : 'embed',
      'flash' : '',
      'html5' : '',
      'width' : 570,
      'height' : 240
   }
);

This will instantiate the player with 'embed' mode. When embedding directly in the page and not using 'popup' (floating layer) mode then we must provide an anchor for the video:

<div id="myVideo"></div>

Place this anchor where you want the video to appear.

To instantiate in 'popup' mode then change the 'type' property to 'popup':

      'type' : 'popup',

This will instantiate the player with 'popup' mode and in this case a range of positioning options and many others are available. The only case when the anchor code above is needed is when the positioning mode using 'anchoring'. For more details on this see below.


Adding your video for Flash & HTML5

OptinPlayer will switch seamlessly from Flash video to HTML5 video depending on the browser/device detected. Add a fully qualified or relative URL to your video, which may be .flv,.mp4,.m4v for Flash video or .mp4,.mov for HTML5 video. Transparent video (using .flv) is also supported for Flash.

      'flash' : 'http://www.myhost.com/oplayer/videos/myvideo.mp4',
      'html5' : 'http://www.myhost.com/oplayer/videos/myvideo.mp4',

Your video can be hosted on any server you want, including content delivery networks such as Amazon S3. To use RTMP or Amazon secure authenticated URL's see the links on the left.


Using a start image and video onclick actions

Any start image can be used which will overlay the video and toggle playback by clicking on it. That's the default behaviour but there are additional options available which we will detail here.

No start image - enable onclick redirect or JavaScript

To switch off the start image completely and allow for onclick redirect use the following setting:

'startImage' : false,

You can then specify a redirect URL as follows:

'vLink' : 'http://www.optinplayer.com',

With the start image set off, the 'vLink' setting can also be used for any JavaScript, and the system will detect this and run the script, for example:

'vLink' : 'op.play(\'myVideo1\')',

Remember to escape any inner single quotes.

Changing the start image

The default start image is the play icon supplied and this can be changed with the following setting using any valid image URL:

'startImageLocation' : 'http://www.myhost.com/oplayer/images/start.png',

The image will be automatically centered over the video including the control bar, but you may exclude the control bar (and so leave it visible) with the following setting:

'startImageCoverControl' : false,

If this is omitted, the default value is true, so that the whole video is covered.


Using a link to control display

By default a video of type 'popup' that has been instantiated will display automatically. To use a link instead, such as a textual link or thumbnail to popup a video then set the property 'display' to 'link':

      'display' : 'link',

And then use the following code to display the video

<a href="javascript:void(0)" onclick = "op.create('myVideo1')">display video 1</a>

This is just an example of a textual link, the important part is the onlick code. For more examples using thumbnails and code snippets for them see the examples pages.


Control bar visibility options

The Flash control bar can be always visible, disappear after a few seconds and re-appear when the viewer mouses-over the video,or be hidden completely.

In the last case the play/pause action would be controlled optionally from clicking the video, or not at all (in which case autoPlay would be true).

      'controlVisible' : true,
      'controlStayVisible' : false',

In the above example the control bar will be visible initially and then be hidden a few seconds after mouse-out.


AutoPlay & AutoLoad options

One of the most powerful benefits of OptinPlayer is the option to not autoload. If you have multiple videos on a page all buffering at the same time the bandwidth (and so performance) is severely degraded.

If 'autoPlay' is true then 'autoLoad' is true by default. The default values if these properties are omitted are 'autoPlay' false and 'autoLoad' true, which is the most common requirement.

      'autoPlay' : false,
      'autoLoad' : false',

In the above example the video will not play automatically and will not buffer until playback is started.


Buffer interval

Related to these properties is 'bufferInt' which is the number of seconds of video to download before playback starts. The default value is 3secs but for videos encoded with high bit-rates a higher value may be needed:

      'bufferInt' : 7,


For a full list of options see here

We are here to help

Whatever the issue we want to help, please post a ticket here or at the lively forum for a fast and helpful response.


Back to top