Using JWPlayer with Non Flash

CARMA About CARMA CARMA Requirements CARMA Changelog Setup Setting Up CARMA MySQL Settings Add Site Porting Sites to CARMA Moving CARMA Sites Admin The Sites Admin Site Sections Publish Mode Content Set Schedule Templates Admin Members Area Templates Tour Templates Member Favorites Smarty Loops Smarty Caching Smarty print array Base Templates User Variables Rating System   Template Functions CARMA Template Functions carma_actor_photo_name carma_comments_display carma_comments_form carma_count carma_favorite carma_gal_custom carma_get_extended carma_list carma_list_favorites carma_list_gals carma_list_third_party_content carma_list_videos carma_login_log carma_most_viewed carma_newest carma_news carma_poll carma_retrieve_sections carma_search carma_actors_search carma_show_gal carma_show_video carma_top_actors carma_top_rated carma_upcoming print_page_numbers Template Function Aliases carma_comment_display carma_display_comment carma_display_comments carma_extended carma_extended_data carma_get_extended_data carma_list_all Common Parameters assign assign_prefix count data_only display_on_assign start tpl Schedule Admin The Schedule Admin Scheduling Content Content Set Schedule Calendar Snapshot News Admin The News Admin Add News Auto News Feedback Admin The Feedback Admin The Polls Admin Gallery Content Admin The Gallery Content Admin Adding Content Edit Image Adding Image Text Content Set Locations Content Set Categories Managing Thumbnails Watermarking Image Removal Image Order Rotate Image Image Quality Video Content Admin The Video Content Admin Adding Content Video Clips Out of Order Video Thumbnails Content Set Locations Content Set Categories Video Format Flash Player Generate Flash Videos Using mp4 Videos Video Content Names Thumbnails Admin The Thumbnails Admin Image Thumbnail Video Thumbnails Third Parties Admin Third Party Content Scan Content Admin Scan Content Actors Admin The Actors Admin Add Actor Actor Photos Actor Documents Manage Attribute Types Creating Actor Pages Members Admin The Members Admin Member Details Stats Admin The Stats Admin Site Statistics Member's Statistics Content Statistics Actor's Statistics Accounts Admin Accounts Admin Add Account Access Levels Configuration Admin The Configuration Admin CARMA Configuration Variables Video Format Troubleshooting Common Errors Extras The Support Admin Admin Areas CARMA Home Pseudo Streaming Flash Player Using mp4 Videos Zipping Content Third Party Content X-Sendfile Xmoov-php TMMid

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.