Hi Germi,

I found this info about JW Player streaming from CloudFront however, the JS file that I think I need to edit is rather confusing.

Any clarification of what I need to change and where would be great.

Thanks,

Geraint

Hi again...

Just found this article that looks moderately straight forward.

The section of the article that is particularly relevant is at the bottom:

The key information on this screen is the Domain Name: in my case, s2v9at17xgxf0u.cloudfront.net. If you’ve chosen to use a CNAME, you’ll need to go to your domain’s web host to finish that configuration. In the this case, I had to ask that streaming.learningapi.com be set up as a CNAME to s2v9at17xgxf0u.cloudfront.net.

Either way, this is ready to stream. The URL to your new Cloudfront streaming looks like this…

rtmp://[domain_name]/cfx/st/[filename]

…where the [domain_name] is either the Cloudfront domain name shown on your AWS Cloudfront Management page (shown in Figure 7), or the CNAME you’ve set up with your web hosting provider. The /cfx/st/ is the pathname for Cloudfront streaming and is required. The [filename] matches the file you placed in your S3 bucket.

Hope that this is in some way helpful.

Best Wishes,

Gez

hello,

hmm a lot of things here. I can't go into every article and read them all..

let's see: you want to stream from an RTMP server. ok. do you have URLs for each song?

if you need to add any flashvars to the jywplaer, such "streamer", which appears to be necessary, you can do it on the /plugins/muscolplayers/jwplayer.php file

the player script is created at aorund file 160...

I have a dedicated bucket and cloudfrot domail for the streaming media - all paths are relative to those of the songs folder that contains all of the media on my server. These are sync'd to my amazon bucket, maintaining the same file/directory structure as the server.

The database is then updated to change the links to the media where

songs/folder/song.mp3 would become

[bucket]/folder/song.mp3

Hope this helps.

Thanks,

Gez

well.. then, isn't it enough to set the SONGS SERVER music collection param to

[bucket]

and each song path to /folder/song.mp3

?

Hi Germi,
Apparently, I need to set the streamer variable to rtmp://streaming.learnthrusong.co.uk/cfx/st/

That is the CNAME that I have set up to point to my amazon cloudfront bucket.

The problem I have is that I'm not sure exactly where I need to change this. I'm also not 100% sure how I specify the location of swf pointing to the cloudfront domain too - which file do i edit? From reading the articles that I linked to in previous post, I do understand that I should host it out of my webserver to avoid paying double bandwidth.

The reason for not simply specifying the server in parameters of music collection is that its not just chunking the file into the users browser, it will instead use RTMP which will instead deliver the file progressively. Also, my S3 component is used for access credentials to access the files and redirecting calls to the files that I set to sync by re-routing them to their cloudfront counterparts.

I know you're probably busy but the articles are really succinct and I can understand them and I'm no more than a novice and having built my site out of necessity. Its purely the parts I need to edit within music collection modules and plugins.

Thanks in advance!


Gez

Hi Germi,

I'm really struggling with this.

I have updated the jwplayer.php file to include the location of the player.swf and other files - please see attached.

You'll notice that the player is now being served from my amazon S3 bucket.

I am currently looking into the possibility that the issue of the files not playing may be due to the fact that amazon S3/Cloudfront does not play nicely with files with a '.mp3' extension or in fact any files that contain 'mp3' in it's name.

I will update to let you know.

As for the Module - where do I update the relevant details such as the location of the player, skin, streamer and so on that I've changed in the plugin?

Please help! I'm sure that this is a feature that many music collection users will want to adopt due to it's scalability and competitive pricing to deliver high-quality audio/video.

Many Thanks,

Gez

Hi Germi,

Right, I've done a bit of further reading. I got an S3/Cloudfront tool called cloudberry explorer that has allowed me to give permissions to CloudFront to access S3 Files.

I have also updated the JW Player script (please see attached).

I have also tried setting the song server to: https://streaming.learnthrusong.co.uk This is a CNAME that points to my cloudfront domain (s3uk5hia6u19l0.cloudfront.net) where my songs folder is actually (s3uk5hia6u19l0.cloudfront.net/songs).

This results in the on the go player not loading the songs but it keeps trying and album players load a message:

Stream not found: /music-room/project/streetcare-rct/album/the-envirovision-song-quest-rct-2011?format=feed&type=xspf

Clearly, there is a path issue here as it only displays a relative path in the error - i.e. there's no www.learnthrusong.co.uk or amazon base url in front of the /music-room/project/streetcare-rct/album/the-envirovision-song-quest-rct-2011?format=feed&type=xspf.

How do I reference my songs location for streaming? Do I
1. use s3uk5hia6u19l0.cloudfront.net
2. s3uk5hia6u19l0.cloudfront.net/songs or
3. https://s3-eu-west-1.amazonaws.com/lts-media-stream or
4. https://s3-eu-west-1.amazonaws.com/lts-media-stream/songs

I am referencing the player like https://lts-media-stream.s3.amazonaws.com/plugins/muscolplayers/jwplayer/player.swf which works

As for the JS - Where should the jwplayer.js & playlist_functions.js be?
1. On my webserver i.e. learnthrusong.co.uk/plugins/muscolplayers/jwplayer/ or
2. On my S3 space - https://s3-eu-west-1.amazonaws.com/lts-media-stream/plugins/muscolplayers/jwplayer/ or
3. on cloudfront - s3uk5hia6u19l0.cloudfront.net/plugins/muscolplayers/jwplayer/

1 other thing - when we can get this working, where do I update the module to also pull the files from s3?

Please please help! I am so desperate and have even offered to pay a small amount to help you out with this as I'm so desperate to get this done. In a few days 30,000 people will be pointed at my website so I really need to get this sorted.

Thanks in advance,

Gez

wow..

this seems complicated. I've been reading this for some time to try to totally understand your case. I would need access to your site to check that all params are setted ok.

Germi

Hi Germi,

Have made an amendment to the helpers/xspf.php

This is getting there but some help would be appreciated!

Thanks,

Geraint

CODE CHANGED TO:

_doc;

		

		$feed = '

					Example XSPF playlist

					

						';

						



		for ($i=0; $iitems); $i++)

		{

			if ((strpos($data->items[$i]->link, 'http://') === false) and (strpos($data->items[$i]->link, 'https://') === false)) {

				$data->items[$i]->link = $url.$data->items[$i]->link;

			}

			//thanhnv 2011-07-05

			//replace with cloudfont url

			$data->items[$i]->location = str_replace("https://streaming.learnthrusong.co.uk", "https://s3.amazonaws.com/lts-media-stream", $data->items[$i]->location);

			//https://s3uk5hia6u19l0.cloudfront.net/songs/ev-rct08/c/s/s_ev-rct08-1.mp3

			//

			

			$feed.= "		\\n";

			$feed.= "			".htmlspecialchars(strip_tags($data->items[$i]->title), ENT_COMPAT, 'UTF-8')."\\n";

			$feed.= "			".$data->items[$i]->link."\\n";

			$feed.= "			_relToAbs($data->items[$i]->annotation)."]]>\\n";



			if ($data->items[$i]->creator!="") {

				$feed.= "			".htmlspecialchars($data->items[$i]->creator, ENT_COMPAT, 'UTF-8')."\\n";

			}



			if ($data->items[$i]->location!="") {

				$feed.= "			".htmlspecialchars($data->items[$i]->location, ENT_COMPAT, 'UTF-8')."\\n";

			}

			

			if ($data->items[$i]->image!="") {

				$feed.= "			".htmlspecialchars($data->items[$i]->image, ENT_COMPAT, 'UTF-8')."\\n";

			}

			

			if ($data->items[$i]->duration!="") {

				$feed.= "			".htmlspecialchars($data->items[$i]->duration, ENT_COMPAT, 'UTF-8')."\\n";

			}



			$feed.= "		\\n";

		}

		$feed .= '

					' ;

		return $feed;

	}



	/**

	 * Convert links in a text from relative to absolute

	 *

	 * @access public

	 * @return	string

	 */

	function _relToAbs($text)

	{

		$base = JURI::base();

  		$text = preg_replace("/(href|src)=\"(?!http|ftp|https)([^\"]*)\"/", "$1=\"$base\\$2\"", $text);



		return $text;

	}

I get an error: 1088 on the player now.

Anything else you may suggest?

Thanks,

Geraint

mm... I don't think this file needs to be modified actually.

anyway, it may work

please send me access!

Cheers,

Access is on it's way... 2 mins.

Thanks,

Geraint

Hi Germi,

have you received the access in email?

Thanks,

Geraint

Hi Germi,

Just wondering if there were any developments on this?

Thanks,

Geraint

Hi Germi,

Thought that I'd post my findings here just in case anyone else trying to use cloudfront and/or amazon s3 with music collection...

Summary

In short, it appears as if the filenames or file flashvar is not set correctly which suggests that there are potential relative path issues in functions that create Playlists and so on.

By the way, I just got an email saying that you'd replied in the forum but when I visit the last post is still mine.

Debugging in a bit more detail
After a painstaking day with 2 of us stretching our brains to the maximum I think I've identified where the issue is. Below is an explanation of what steps we've taken and what the results suggest. Also I have a couple of queries relating to where I would need to make the necessary changes in order to achieve streaming of the files - if you agree that my findings are correct of course.

I wanted to take the problem out of my joomla/musiccollection environment to verify that the paths, files and variables were correct in order to rule out potential permission issues etc. We did this by writing a basic HTML page that referenced the player.swf on my s3 server, the streamer flashvar set to cloudfront domain and the file set to songs/.../filename.extension

This produced the same error - 'no stream found'. Then, after reading and cross-referencing a whole bunch of forums and info on longtail site, I looked at the specifications for file vars and realised that older versions of the player required different formats to be written differently. For example,

An mp3 file should be referenced as
mp3ath_to_file.mp3

And

AAC audio (apples audio compression) files -

mp4ath_to_file.aac

This posed an issue. Knowing that MP3s were potentially difficult to stream via RTMP (or at least using CloudFront) I uploaded my latest content as AAC encoded '.m4a' files. At first, before discovering the filename formatting, referencing the files as 'path_to_file.m4a' had not worked. So I tried renaming it to 'mp4ath_to_file.aac' following the aac format as above.

This worked when using 'player with RTMP streamer' profile in the script builder on longtail site. Unfortunately, at the same time, 1 or 2 other elements were changed by my colleague. Therefore I need to double check whether it is the file var requiring the format as above or whether another change that took place explains it.

According to the docs on JW player, specifying the filenames with prefix as above is not necessary in the latest player.

Questions
If it is the case that it does require the prefix, would that suggest that there is some JavaScript missing that is required to do the processing of the filenames to automatically set the prefix?

The reason I ask is that when testing my aac file, it worked but as far as I'm aware this only worked when I changed the extension from m4a to aac and used the mp4 prefix. By the way, you can see this working perfectly on a plain HTML page at www.learnthrusong.co.uk/testplayer.html

If you look at the source code for the page you'll see how I've had to specify the filename and all if the other vars to get it to stream. Obviously, I haven't got any artwork displaying which is another consideration. As I said before, my joomla images dir (images/...) also reside in the root of the same bucket.

What I mean is, if there are scripts either in JavaScript or php that use relative paths to files (ie to create playlists, set flashvars etc) that would be running on my webserver and therefore referencing the audio files on my webserver? If so what would need changing and how?

Would you change the references to those scripts (includes/helpers) to point at the jsvascript on amazon s3 so that their paths reference the audios on s3 or would you edit any references to audio paths in JavaScript files on the webserver to point directly to absolute path on S3?

I'm absolutely desperate to sort this out as I've been working on this for over a week in total, completely lost as to where to begin. I feel that I'm really close now but could really do with guidance on what and where to change anything.

First thing in the morning, I'm going to retest with an mp3 file and also double check whether the .m4a extension audios will stream.

Please let me know what you think. I'll let you know the outcomes.

Thanks,

Gez

Hey, Gez....

Did you ever figure out streaming for .m4a files with Cloudfront? I am having a heck of a time. Any help would be appreciated. Have you tried private streaming?

Let me know. There doesn't seem any way to PM, so I responded here.

Brice

hello @caveman

can you tell us your Music Collection order ID? the system does not recognize you as a customer...

thanks!

Germi

@caveman @germi

Streaming .m4a files does work for sure!

I'm heavily involved in some custom coding inside of music collection at the moment and as soon as I'm done and I've had time to tidy-up the additions/amendments relating to streaming, - end of the week I hope - I'll post my solution.

From what I remember, it ended up being far less complicated than I'd initially anticipated with only 2/3 relatively minor changes in an equal number of files.

Best wishes,

Gez

To stream your albums/playlists from Amazon Cloudfront...

1 - rename the file of the file 'com_muscol/helpers/xspf.php' to 'xspf.backup'.

2 - Unzip and edit the attached xspf.php.zip file, following the included instructions/comments...

3 - Upload the new xspf.php file to the 'com_muscol/helpers' directory [file name=xspf-20120417.zip size=1716]http://www.joomlamusicsolutions.com/images/fbfiles/files/xspf-20120417.zip[/file]

To stream files in the individual player, i.e. for songs, you need to locate and edit the file, 'plugins/muscolplayers/jwplayer.php'.

1 - Specify the location of your player file.
Given that you want to stream your audio video content, you'll also want to store your player files (swf object & any skins) on a cloudfront distribution or S3 bucket. Once you've created one, move your swf object/skins (& JS files if you wish) and note their location before proceeding through the following steps. NOTE, this should be a separate bucket/distribution from the 'streaming' distribution that contains your audio/video content.

1.1 - Duplicate the file and rename it to 'jwplayer.backup'

1.2 - Ensure the duplicate file is called 'jwplayer.php', renaming it if necessary

1.3 - Open the file, 'jwplayer.php'

1.4 - On line 19, inside of the renderPlayer function, after the line

JHTML::_('behavior.mootools');

, replace

$uri =& JFactory::getURI();

with

// $uri =& JFactory::getURI(); //ORIGINAL

$uri = "https://[your_s3_bucket].s3.amazonaws.com/" ;

1.5 - Replace '[your_s3_bucket]' with the name of your S3 bucket or in the event that you are going to use cloudfront to store your player files, replace the whole URL of the $playerRoot variable with your CName or Cloudfront url.

1.6 - Find and replace 2 instances of

$uri->base() 

with

$uri

. There should be 2 instances of this, one at around line 66 and another around line 110. If you want to just comment out the original line, replace the entire lines as follows;
A. Location of the skins

//$array_params["skin"] = $uri->base() . $plugin_root . "skins/" . $params->get('skin') .".zip"; // ORIGINAL - replace with;

$array_params["skin"] = $uri . $plugin_root . "skins/" . $params->get('skin') .".zip"; // Get the skin from your cloudfront/s3 storage

B. Location of the player (swf)

//$player = $uri->base() . $jwplayer_root . "player.swf" ; // ORIGINAL - replace with;

$player = $uri . $jwplayer_root . "player.swf" ;

2 - strip the preceeding '/' from the filename
2.1 - Immediately before

$object = "".JText::_('LOADING_PLAYER')."

, around line 230, add

$song_file = str_replace("/songs","songs",$song->filename);

2.2 - Around line 235, replace

file: '".$song->filename."',

with

file: '".$song_file."',

3 - Setup the streaming params in the player setup
3.1 - Below the line

, add the follwing

										provider: 'rtmp', // New

streamer: 'rtmp://[your_cloudfront_or_cname]/cfx/st/',

3.2 - Replace '[your_cloudfront_or_cname]' with your cloudfront domain or CName

4 - JavaScript Declarations
If you wish to host your JavaScript files for the player from the same bucket/distribution as your swf object, you will also need to change a couple of the script declarations.

4.1 - Locate the code

$document->addScript($jwplayer_root.'jwplayer.js');

$document->addScript($jwplayer_root.'playlist_functions.js');

and replace with

$document->addScript($uri.$jwplayer_root.'jwplayer.js');

$document->addScript($uri.$jwplayer_root.'playlist_functions.js');

That's it!

If you need any further help, please see attached file. It has all of the amendments needed to stream. The only thing's you need to change are the locations (URLs) of your streaming distribution, player and JS files. All commented and easy to follow.

Hope it helps!

Gez [file name=jwplayer-20120418.zip size=3481]http://www.joomlamusicsolutions.com/images/fbfiles/files/jwplayer-20120418.zip[/file]

Hi,

I attempted to follow this to the letter - I call myself making the proper changes to the files.

Here is what I did...

Created a bucket - kolat.jwplayer (this is where I store my player files) - kept the same tree structure so the player files are actually under kolat.jwplayer/plugins/muscolplayers/jwplayer

Created a bucket/CDN - kolat.videocat (setup for streaming RTMP) - under this bucket I have a songs folder - then my video catalog is under this

My Cloudfront distribution is rtmp://sl9ulbnnie73q.cloudfront.net/cfx/st/
My s3 bucket where my player files are is - http://kolat.jwplayer.s3.amazonaws.com/

Attached are the files with the changes I made based on the instructions

What I am confused is on when I go into the admin area to define the song location, I tried placing the full URL

rtmp://sl9ulbnnie73q.cloudfront.net/cfx/st/songs/carykolat/Cb0000010-km2-1.m4v

But I get this error

Parse error: syntax error, unexpected '[' in /home/chaseorg/public_html/kolat/plugins/muscolplayers/jwplayer/jwplayer.php on line 20

This is line 20 in my attached file

$uri = "https://kolat.jwplayer.s3.amazonaws.com/"

kolat.jwplayer - is my bucket where I am storing the jwplayer files.

Any assistance is greatly appreciated, I am trying to do the exact same thing. [file name=muscol_amazons3.zip size=4352]http://www.joomlamusicsolutions.com/images/fbfiles/files/muscol_amazons3.zip[/file]

Sorry!

I made a slight boo boo! I kept getting logged out whilst writing it and resorted to writing the bb code out in a text editor.

On line 20 of jwplayer.php, after the semicolon (';'), remove the square brackets ('[' & ']') and the string, '/code' from within them.

As for the filepaths of each song; they should just be relative to the 'songs' directory as spec'd in your mc params. Also, the S3 bucket/distributions should maintain the same relative folder hierarchy from your joomla root.

In all honesty, from what you describe, you seem to have this covered.

One question... Are the S3 names you gave the actual links? I wasn't sure that 'my.bucket' formatting of bucket names was allowed - with the '.' I mean???

The only other issue you may run into is failure to load content because of cross-domain policy restrictions or file permissions.

Either way, you'll know this by an error output on the player if it occurs. It will read something like, 'Can't read stream', or, 'Access denied' possibly referring to 'cross-domain policy'.

If this occurs, google 'jwplayer cross-domain policy' for background on usage/params etc. Below is a basic file that allows from all domains to get you started. This may not be what you want but it may be the minimum allowed to work - if my memory serves me... Update accordingly.

//EDIT

Stripped out code//

//SEE Attached//

This will need to be placed in a file named 'crossdomain.xml', saved to your joomla root.

Another possible cause would be file permissions. Check the permissions on the files - all of them; swf, flv, audio/video files etc...! Make them all readable/executable by everyone and writable only by owner.

Hope this helps!

Gez [file name=crossdomain.zip size=704]http://www.joomlamusicsolutions.com/images/fbfiles/files/crossdomain.zip[/file]

Hi,

I am close but still having issue where the player is not playing (will post video link of what I am seeing)

Videos below will show you what I have done..

my s3 bucket for my videocatalog is - kolatvideocat (I set this up as cloudfront streaming as well)
my s3 bucket for my jwplayer is - kolatjwplayer

I also had to make a change on line 29 since I am using 2.5 I changed Parameters to Registry - I was getting the JParams error.


Video Link of my Amazon folder setup (using Cloudberry to show the folder structure)

Showing Issue from the Frontend

Showing my file updates and backend setup

I hope I have provided all the information to assist. Thanks in advance for helping on this issue.

Corey [file name=changedfiles.zip size=4351]http://www.joomlamusicsolutions.com/images/fbfiles/files/changedfiles.zip[/file]

I'll take a look at it now,

brb

I greatly appreciate this...

Thanks

Ok,

firstly, your backend looks OK!

Where are you hosting the JS files (jwplayer.js etc)? Is that in the same bucket/folder as player.swf? If so, that setup of $uri in xspf.php and jwplayer.php are correct.

Where are you storing the artwork for your albums - on S3 or on webserver? If they aren't in the same bucket as your player.swf, you should either, mirror your images/albums (and other music collection img dirs there, or change the string replace function for the artwork with your webserver url.

One other thing - is your subdomain.domain.com of your webserver definitely setup correctly?

Hope it helps!

Gez

If your artwork is already on s3, double check that they are readable to 'world'. If they are, then...

If you right-click where the player should appear and select 'inspect element', what do you see there?

Even better, if you look at the resources/scripts in the debug console of your browser (dev tools), can you see any errors around the player.swf?

If you get a 403/404 on that, check the permissions for that too...

Any joy?

If not, are you on skype? If so, add me on skype (username: learnthrusong) and I'll take a look for you... hopefully should be a quick thing as everything looks in order - just a couple of things to check.

Oh, what's your skype name too so I know it's you...?

Gez

BRB - need coffee

Hi Gez

Concerning - the JS files - yes I copied the entire folder structure to the s3 bucket to it will look like

kolatjwplayer -> plugins -> muscolplayers -> jwplayer

under that is all the files (see attached image)

Concerning image artwork - I believe I will store this on the webserver, so I will update this line of code. I only have one video at the moment and I didn't upload any images, etc.

Concerning the subdomain, I created this with cpanel via the subdomain panel, then I installed joomla, etc. I believe this is OK.

So other than the artwork, you are saying that everything looks OK - would the artwork be the reason that the player is not playing?

One other thing...

If my artwork will be on the server - then it do I just use the original helper file xspf?

Only if it was expecting artwork, i.e. if you'd set artwork in MC, the player might fail to load if it can't access it on the specified link.

You'd need to change line 45 to your base website url in that case...

Is it showing any errors in the inspector/dev tools?

Hi,

I made the change - still no change..
I do see this error - I am using FF - and it's saying jwplayer not defined.

That's weird... Have you checked the file permissions on the player.swf in cloudberry?

If you request connection to me on skype I'll have a look at it.

what is your skype ID - I will request now. I know it's something silly.

learnthrusong, spk in a few mins

Is there a final resolution to this problem on how to make cloudfront work with music collection?
i am not be able to fix this.
I will love if anyone fixed it and wants to help me out on this.