Using JWPlayer with Non Flash
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 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.
ln -s ../cms_data site_scripts/ ln -s ../cms_data tour_scripts/
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:
Deny all
Update this file to be:
#Deny all Options -Indexes
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:
#Deny all Options -Indexes
Update this file to have the following:
#Deny all Options -Indexes AddHandler h264-streaming.extensions .mp4 .xxx
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:
#Deny all Options -Indexes AddHandler h264-streaming.extensions .mp4 .m4v
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:
{elseif $mime == 'video/mp4'}
{* Video type mp4 *}
And
{elseif $mime == 'video/x-m4v'}
{* Video type m4v *}
Replace the existing code or add the following code to your design:
<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}
The above code will use the JW Player you have set up in your CARMA root directory.
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:
{foreach from=$carma_video.files.$type key=id item=file}
Within this loop, you can either replace the code within or add the following code:
<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}
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.
