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.
A new player instance is added with the following minimalist code:
'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:
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.
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.
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',
'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.
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
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.
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
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.
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.
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