Sunday, May 22, 2011

Embed JayCut Online Video Editor on your Joomla! site

In this guide we will embed the JayCut video editor in an article on your Joomla! site. This example is tested on Joomla! 1.5.14.
For this example to work you will need to be able to run php code from within your Joomla! articles. This is not a standard feature of Joomla! but there are several extensions that makes this possible.
We will be using the extension Sourcerer to enable execution of php code in our article. If this extension is not installed on your Joomla! instance you will need to install it first. Getting and installing extensions in Joomla! can be done in different ways, we will show one way of doing it. If you know that the Sourcerer extension is already installed, or if you prefer some other method of installing extensions, you may skip the steps regarding installing the Sourcerer extension
  1. Go to the website of the extension and download the latest version. If asked, choose to download the file in favour of opening it. Save it to some place where you easliy can find it, for example your desktop.
  2. In the Joomla! control panel, choose Extensions, Install/Uninstall from the menu.
  3. In the Upload Package File field, press the Browse button and locate the extension file downloaded earlier.
  4. Click Upload file & Install

Now we can embed the editor on your site!

  1. Create a new article and paste the code found in the gray box below as the content of the article.
  2. Insert your own sitename, API-key and shared secret instead of mybestsite.com, y8Syre1geg and 3kJfH... right in the beginning.
  3. Click the "Save" icon and you're done!

The code to paste:


{source}
[[?php
/* JayCut API Credentials */
define('SITE_NAME',     'mybestsite.com');
define('API_KEY',       'y8Syr1geg');
define('SHARED_SECRET', '3kJfHp0OfwinB55mejerpNFdWAjllUTPfCNZUqbhZp3GlK3Dy3RT0Gn8l894DrzO');

/* Check if there is a logged in user and get the id in that case */
$user =& JFactory::getUser();
if ($user->id) {
  $path = '/users/' . $user->id;
  $method = 'PUT';
} else {
  $path = '/users';
  $method = 'POST';
}

/* Create a signed loginUri */
$expires = strtotime('now + 2 minutes');
$signature = sha1(SHARED_SECRET . $method . $path . $expires);
$loginUri = ('http://' . SITE_NAME . '.api.jaycut.com' . $path .
  '?login=true' .
  '&_method=' . $method .
  '&api_key=' . API_KEY .
  '&signature=' . $signature .
  '&expires=' . $expires);

?]]

[[script type="text/javascript" src="http://[[?php print SITE_NAME ?]].api.jaycut.com/assets/javascripts/sdk.0.4.js"]] [[/script]]
[[script type="text/javascript"]]
//<![CDATA[ 
var options = {
  'sitename': '[[?php print SITE_NAME; ?]]',
  'login_uri': '[[?php print $loginUri; ?]]',
  'embed_width': '800px',
  'embed_height': '600px'
}

JC.embed_mixer(options);
//]]> 
[[/script]]

[[div id="jaycut-editor" ]]
  [[p]]This will be replaced by the flash object[[/p]]
[[/div]]

{/source}

No comments:

Post a Comment