XoMedia

From Wiki Web Show

XOOPS + JQuery Media = xoMedia

Creating Rich Media XOOPS sites with JQuery and JQMedia

This article provides instructions on adding sitewide rich media to XOOPS websites using JQuery and the JQMedia plugin.  JQMedia uses a simple text link to render object embed code for players of all popular media file types. JQmedia also renders iframe code for any online html or pdf document.

JQMedia is an extremely powerful object embed tool. Please visit the JQMedia Plugin website to learn how to access all of the script's features.

xoMedia Features

• Embeds players for most any media file type.
• Iframes web pages and pdf documents.
• Uses a simple html anchor tag with class="media" to display multiple players.
• Theme integration.  No core files are changed.
• Direct Xoops dhtmltext editor integration.  One button inserts most all media and iframe documents.

Supported Media Players and File Types

Requirements

• XOOPS 2.4 and above



• JQuery: included with xoops 2.4 and in the xoMedia Archive*
• JQMedia Plugin*
• JQuery Metadata Plugin*



• swfObject (optional)*
  
  SwfObject is not required, but if available, JQMedia will use it to embed the flash player. swfObject provides access to the JWPlayer flashvars and api that set the player's appearance, behavior and control parameters.



• JWPlayer or other flash media player

* For convenience I have created the xoMedia Archive that contains everything you need except the JWPlayer. The xoMedia archive also contains the files needed to integrate jquery media with the xoops dhtml text editor.

The xoMedia archive contains script versions current with this article's publish date (1/20/2010) and may not be updated often. It is always recommended to get the latest code from the above sources.

Integrating JQuery Media with XOOPS

This is easier than it looks. Check that your xoops install contains xoop_lib/Frameworks/jquery/jquery.js and then upload the flash player and the xoMedia archive. Modify your theme to include the scripts and begin accessing your site's new rich media features with simple html anchor tags.

1) Upload the JWPlayer

Get the JWPlayer, extract the zip file, rename player.swf to mediaplayer.swf and upload it to your XOOPS root directory.

2) Add the JQuery and swfObject scripts to your theme

Sample Theme Framed by JQMedia

Method 1:

Call the JQuery and swfObject scripts from the Google api by adding the following to your theme's head:

<script src="http://www.google.com/jsapi "></script>
<script>
google.load("jquery.min", "1.3.2");
google.load("swfobject", "2.1");
</script>

OR

Method 2: Use local scripts

XOOPS 2.4 includes JQuery with the core. It is located in xoops_lib/Frameworks/jquery.

Call the local script by adding this to your theme's head:

<script type="text/javascript" src="<{xoAppUrl browse.php?Frameworks/jquery/jquery.js}>"></script>

Upload the xoops_lib/Frameworks/swfobject folder from the xoMedia archive. Add this to your theme:

<script type="text//javascript" src="<{xoAppUrl browse.php?Frameworks/swfobject/swfobject.js}>"></script>

3) Include the JQuery Metadata and Media Plugins

Get the latest JQuery Metadata and JQMedia plugin scripts* and upload the .js files to xoops_lib/Frameworks/jquery/plugins.
Add the following to your theme's head:

<script type="text/javascript" src="<{xoAppUrl browse.php?Frameworks/jquery/plugins/jquery.metadata.js}>"></script>
<script type="text/javascript" src="<{xoAppUrl browse.php?Frameworks/jquery/plugins/jquery.media.js}>"></script>

Accessing the JQuery Media Plugin

The JQMedia plugin uses anchor tags containing class="media" to access the script. JQMedia renders object embed code for each player depending on the media's file type. A text link is displayed if javascript is disabled or a script fails to load.

Add a media link to your html:

Video Link:
<a class="media" href="myvideo.flv">My Video</a>

Music link:
<a class="media { width: 468, height:20 }" href="mymp3.mp3">My MP3</a>

Iframes:
<a class="media {width: 640, height:600 }" href="mydocument.pdf">pdf in iframe</a>
<a class="media {width: 640, height:600, type: 'html' }" href="mypage.html">web page in iframe</a>
 

Changing the Jquery Media Default Variables

The script provides two methods to change all default settings without modifying the original script.

1) Change default settings via a script in the theme's head.

<script type="text/javascript">
// Override default player dimensions
$(function() {
$('a.media').media( { width: 480, height: 360 } );
});

// Assign players by media type (.extPlayer)
$.fn.media.defaults.flvPlayer = '<{xoAppUrl mediaplayer.swf}>';
$.fn.media.defaults.mp3Player = '<{xoAppUrl mediaplayer.swf}>';

// map a media type to a specific player
$.fn.media.mapFormat('wav', 'quicktime');
</script>

2) Set variables in the media link.

Example: <a class="media { width:320, height:30 }" href="mymedia.mp3">My Music</a>
Resets the players dimensions

XOOPS dhtml Text Editor and Jquery Media

The integration of JQMedia with the xoops dhtmltext editor enables the display of iframe pages and all popular media types thru one button on the user interface.

1) Get the xoMedia Archive and extract to your computer.

2) Edit the language constants in class/textsanitizer/media/media.php

3) Upload the media folder to xoops/class/textsanitizer/.

4) Edit your xoops/class/textsanitizer/config.php (around line 27) to include the new media extension and turn off the obsolete iframe, flash, mp3 and wmp extensions.

"media" => 1, //add this to turn on the media extension
"iframe" => 0, //Turn off
"image" => 1,
"flash" => 0, //Turn off
"youtube" => 1,
"mp3" => 0, //Turn off
"wmp" => 0, //Turn off

5) Upload the media button image to xoops/images/forms

xoopscode:
[media=480,360,false,My Video]http://mysite/myvideo.mov[/media]
[media=width,height,autostart,title]media url[/media]

Conclusion

You should now have a fully functional xoMedia site. Webmasters can now display rich media content by adding media anchor tags to any block, template or theme. Your members can now display their media in your forums and news articles using the dhtmltext editor.