View source for Using JWPlayer with Non Flash

{{CARMA1 Manual
| show_video_content_admin_section = true
| show_extras_section = true
}}

'''NOTE:''' If you have not followed our initial set up instructions for JW Player, please visit our article [[Using JWPlayer]]

== Using JW Player With Non-Flash Files ==

If you are using [http://www.jwplayer.com/ JW Player] with Non-Flash files such as ".MP4" files in [[CARMA]] the below changes to your [[CARMA]] server and templates will allow these files to be played.

== Setting up your CARMA server == 

JW Player requires direct access to your files if they are not a flash file.  To allow for this you will first need to allow access to your [[CARMA]] cms_data directory in your site_scripts and tour_script directories.  To allow this, you would set up a symbolic link from these directories by running the following commands from the root [[CARMA]] directory.

<pre>
ln -s ../cms_data site_scripts/    
ln -s ../cms_data tour_scripts/    
</pre>

Once these symbolic links are created you would need to edit the .htaccess file in your cmd_data directory.  This file controls access to the files within that directory.  When viewing the file you will see that it contains:

<pre>
Deny all
</pre>

Update this file to be:

<pre>
#Deny all
Options -Indexes
</pre>

This change will allow JW Player to access the files directly when the file information is provided to JW Player

== Allowing Psuedo-Streaming With JW Player == 

Pseudo-Streaming will allow your users to jump to any point in your .MP4 video without the need for the entire file to be loaded

To allow this you would first need to download the "H264" Apache module found at http://h264.code-shop.com/trac/wiki and have it installed on your server. 

=== Setting Handlers in .htaccess ===

If you are using a file with an extension that is not ".MP4" than you would need to update the .htaccess file in the cms_data directory to have the "H264" Apache Module interpret these files as ".MP4" files.  In the .htaccess of your cms_data directory you should see this:

<pre> 
#Deny all
Options -Indexes
</pre> 

Update this file to have the following:

<pre>
#Deny all
Options -Indexes
AddHandler h264-streaming.extensions .mp4 .xxx
</pre>

Where ".xxx" is the extension that is being used by your files, as an example, if your files are ".m4v" files, the .htaccess file would look like this:

<pre>
#Deny all
Options -Indexes
AddHandler h264-streaming.extensions .mp4 .m4v
</pre>

You would need to add a record for each file extension you intend to play with JW Player that is not an ".MP4" file.

== Adjust the Code in view_clip ==
After setting up JW Player in our [[Using JWPlayer]] article update your '''view_clip''' template in your [[Members_Area_Templates]] with the following:

Between the Code:
<pre>
{elseif $mime == 'video/mp4'}
{* Video type mp4 *}
</pre>
And
<pre>
{elseif $mime == 'video/x-m4v'}
{* Video type m4v *}
</pre>

Replace the existing code add the following code:

<pre>
 
<script type="text/javascript" src="jwplayer.js" ></script>
<div id="myElement">Loading the player ...</div>

{literal}
<script type="text/javascript">
<!--
	jwplayer("myElement").setup({
		{/literal}
			file: '/cms_data/{$path}/{$filename}',
		{literal}
		height: 360,
		image: "/view_image.php" + escape("?galid={/literal}{$smarty.get.galid}{literal}&file=sample.jpg&width=768&height=432&crop=1&extension=.jpg"),
		startparam: "starttime",
		width: 640
	});
// -->
</script>
{/literal}

</pre>

The above code will use the JW Player you have set up in your [[CARMA]] root directory,  The "{rebuild_link" function retrieves the URL needed to play the flash file.



== Adding the Player to the show_video Template == 

If you wish you can have the JW Player show up in your show_video template where you show all your videos from one content set.

Within this template you will see a smarty "foreach" loop set as such:

<pre>
{foreach from=$carma_video.files.$type key=id item=file}
</pre>

Within this loop, you can either replace the code within or add the following code:

<pre>
<script type="text/javascript" src="jwplayer.js" ></script>
<div id="myElement">Loading the player ...</div>

{assign var=type value=$smarty.get.type}
{assign var=extension value=$carma_video.extensions.$type[0]}
{assign var=filename value=$carma_video.files.$type[0]} 

{literal}
<script type="text/javascript">
<!--
	jwplayer("myElement").setup({
		{/literal}
		{if $extension == $type}
			file: '/cms_data/{$carma_video.path}/{$file}',
		{/if}
		{literal}
		height: 360,
		image: "/view_image.php" + escape("?galid={/literal}{$carma_video.galid}{literal}&file=sample.jpg&width=768&height=432&crop=1&extension=.jpg"),
		startparam: "starttime",
		width: 640
	});
// -->
</script>
{/literal} 
</pre>

The "{assign" smarty functions set data that is needed by the player to run.  The file itself is then loaded directly to the player using the "file: '/cms_data/{$carma_video.path}/{$filename}'," parameter.