Flash video

• Content server configuration
• Page connection
• Video player connection:
  • OSMF-based player
  • JW player

Content server configuration

If you’re using CDN or separate hosting for content (e.g. content and site you’re connecting FlockPlay to — both have different domains), then you have to setup content server to work with FlockPlay. There are two ways of doing this:

1) Server configuration (recommended)

Add this line in response header:

Access-Control-Allow-Origin

For nginx it could look like:

add_header Access-Control-Allow-Origin *;

2) Iframe

If by some reason you’re unable to use recommended way, then do the following.

Place this file in the root directory of your content server: p2pjs.html

and add data-cors="true" attribute to the FlockPlay page connection code (as shown on example below).

Page connection

Place this code inside tag on all pages of your site:

<script src="http://peer.megacdn.ru/p2p.js" type="text/javascript" data-key="demo" data-tag="github" defer="defer"></script>

If you use iframe, then code should be like:

<script src="http://peer.megacdn.ru/p2p.js" type="text/javascript" data-key="demo" data-tag="github" data-cors="true" defer="defer"></script>

You could use optional data-tag attribute to track stats separately for different pages. E.g. FlockPlay code for main page could look like:

<script src="http://peer.megacdn.ru/p2p.js" type="text/javascript" data-key="demo" data-tag="main_page" defer="defer"></script>

Video player connection

OSMF-based player

Service supports both HDS and HLS formats. Use with player one that suits you.

HDS-plugin: http://pjs.megacdn.ru/P2PDynamicPlugin.swf

HLS-plugin: http://pjs.megacdn.ru/P2PHLSDynamicPlugin.swf

(examples below use HDS plugin)

Example of dynamic connection to Strobe player:

<param name="flashvars" value="..&plugin_p2p=http%3A%2F%2Fpjs.megacdn.ru%2FP2PDynamicPlugin.swf"

Example of static connection to OSMF-based player:

import org.osmf.media.DefaultMediaFactory;
import org.osmf.media.MediaFactory;
// ...
private var factory:MediaFactory = null;
private var player:MediaPlayer = null;
protected function onApplicationComplete(event:FlexEvent):void
{
  // ...
  factory = new DefaultMediaFactory();
  factory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD, onPluginLoaded);
  factory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD_ERROR, onPluginLoadError);
  factory.loadPlugin(new URLResource("http://pjs.megacdn.ru/P2PDynamicPlugin.swf"));
  // ...
  player = new MediaPlayer();
  // ...
}

private function onPluginLoaded(event:MediaFactoryEvent):void
{
  trace("Plugin loaded");
}

private function onPluginLoadError(event:MediaFactoryEvent):void
{
  trace("Plugin failed to load");
}

private function createResource(url:String):void
{
  var res:URLResource = new URLResource(url);
  var element:MediaElement = factory.createMediaElement(res);
  // ...
  mediaContainer.addMediaElement(element);
  player.media = element;
} 

JW Player

HLS-plugin: http://pjs.megacdn.ru/FlockPlayMediaProvider.swf

Add the allowscriptaccess with a value of always in the player embed code. Example:

<object width="800" height="400" id="TestPlayer" name="TestPlayer">
  <param name="movie" value="http://p.jwpcdn.com/6/10/jwplayer.flash.swf"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <param name="wmode" value="direct"></param>
</object> 

Add playlist object in the initialization code of the player. Specify the path to the FlockPlay plugin in the parameter provider of this object. Example:

jwplayer('TestPlayer').setup({
  primary: 'flash',
  playlist: [{
    provider: 'http://pjs.megacdn.ru/FlockPlayMediaProvider.swf',
    file: 'http://example.com/4567818431.m3u8',
    image: 'http://assets-jp.jwpsrv.com/thumbs/q1fx20VZ-480.jpg'
  }]
});

If you want to add autoplay function, use this code:

jwplayer('TestPlayer').onReady(function() {
  window.setTimeout(function() {
    jwplayer().play();
  }, 1);
});

If your player is not in the list, then feel free to contact us at ask@flockplay.com and mention it. We are constantly expanding supported players list and would be happy to add yours in no time.