Struggling to get JW Player Working

I’ve followed the steps in the “JW Player® w/ s2Stream Shortcodes” how to article. But where a video should be is completely blank. I’ve stripped everything back to a bare-bones installation (Twenty Twelve theme with just the S2 Member plugin). I thought I would try with the video file in the /wp-content/plugins/s2member-files/ before grappling with Amazon S3/Cloudfront integration so this is about as basic a set-up as can be.

I’ve been through the how-to article a couple of times and I think i’ve followed all of the steps. The only thing I haven’t done is something which I picked up from the Longtail Video installation instructions for J W Player and that is put this code in the of the webpage HTML:

jwplayer.key="[License Key Goes Here]"

As that isn’t specifically mentioned in the how-to article I assumed that this wouldn’t be necessary and that the S2 Member shortcode would handle things behind the scenes.

Should I do this and if so, where do I put this code in WordPress/S2 Member?

Thanks

Thanks for your inquiry. ~ We appreciate your patience :-)

No, you don’t need either of those extra lines.
In your [s2Stream /] Shortcode, please use this attribute.

[s2Stream .. player_key="your key" /]

See also: Knowledge Base » JW Player® w/ s2Stream Shortcodes

Please let us know if problems persist :-)

I finally managed to get this working. The latest S2 Member update which allows the reference to the JW Player script in the head tag certainly helped. I think I was previously experiencing some conflict between what I had between the head tags and what was in the short code. So, with the script referenced in the head tags, the short code looks like this: –

[s2Stream player="jwplayer-v6" player_width="480" player_height="270" file_download="video.mp4" rewrite="yes" /]

I think it is much simpler to implement it like this without having to reference the player license key in each shortcode.

However, aside from issues with the short code, there was one other miniscule issue that had completely compounded my efforts to get this working and that is the reference to the JW Player location.

This doesn’t work

"/jwplayer/jwplayer.js"

But this does

"./jwplayer/jwplayer.js"

The period before the first / makes all the difference and allows the player to be referenced from the root directory. I’m not sure why this should be because I have my JW Player in the root directory as shown in the “how to” article. Has anybody else had this problem?

Anyway, I think I’m good to go; just got to get my head around the S3/Cloudfront bit now!

Thats the easy part :)

However, aside from issues with the short code, there was one other miniscule issue that had completely compounded my efforts to get this working and that is the reference to the JW Player location.

This doesn’t work

“/jwplayer/jwplayer.js”

Are you running WordPress® from a sub-directory of your domain? If so, try this:

/sub-directory/jwplayer/jwplayer.js

Are you running WordPress® from a sub-directory of your domain? If so, try this:

/sub-directory/jwplayer/jwplayer.js

Yes, thank you. That’s the answer. I have a generic domain name and for development purposes I’m running the installation in a sub-directory. I’ll move it to it’s own domain when I’m ready to make the site live.

However, I seem to stumble from one hurdle to another. Now that I’ve overcome all of this. I’ve set up the S3/Cloudfront integration and S2 Member distributions are configured and enabled in Cloudfront. So far so good, but when I put the S2Stream short code into a page, the side bar, page content and footer completely disappear! All I’m left with are the site header and the page title. I’ve tried it with all plugins disabled and just the plain twenty twelve theme and the problem is still there so I’m sure there are no plugin/theme conflicts causing this problem.

If remove the short code the page displays properly. If add it back in everything disappears again. This is the source code from the very end of the page: –

<article id="post-84" class="post-84 page type-page status-publish hentry content-page">
	<header class="entry-header">
		<h1 class="entry-title">Part1</h1>
	</header><!-- .entry-header -->

	<div class="entry-content">

With the short code present there is no content or code at all beyond the [div class="entry-content"] tag. With the shortcode removed, all of the page content and footer code etc is included.

Any idea what might be causing this?

Thanks for the follow-up.

However, I seem to stumble from one hurdle to another. Now that I’ve overcome all of this. I’ve set up the S3/Cloudfront integration and S2 Member distributions are configured and enabled in Cloudfront. So far so good, but when I put the S2Stream short code into a page, the side bar, page content and footer completely disappear! All I’m left with are the site header and the page title. I’ve tried it with all plugins disabled and just the plain twenty twelve theme and the problem is still there so I’m sure there are no plugin/theme conflicts causing this problem.

Could you please post the Shortcode that you are using on this page?

Thanks, this is the shortcode:

[s2Stream player="jwplayer-v6" player_width="640" player_height="360" file_download="step1.mp4" rewrite="yes" /]

Just for the record, I have this in the head tag of the page:

<script src="/ACCWII/jwplayer/jwplayer.js"></script>
<script>jwplayer.key="[License Key Goes Here]"</script>

“ACCWII” being the subdirectory where I’m currently building the site.

Also as well as the shortcode mentioned in my previous post, I’ve also tried this: –

[s2Stream player="jwplayer-v6-rtmp" player_path="/ACCWII/jwplayer/jwplayer.js" player_width="640" player_height="360" file_download="step1.mp4" /]

But still get the same result.

Excactly what error are you getting?
Are you getting ID not found or what?

I’m having almost the same: the video window displays fine for me in Chrome but doesn’t display at all in Firefox. Other people can’t get the video to display in any browser.

I didn’t find the article about including the JW Player script in the head tag.. where can I find that?

Oh and the other issue is that even for those who can play the video, it’s playing very poorly. Lots of stops and starts. The same video file uploaded to Vimeo plays fine. This is using S2Member / AWS S3 / Cloudfront / JW Player. Any idea how I can troubleshoot this? I have been through all the support docs that I can find…

Thanks

Excactly what error are you getting?
Are you getting ID not found or what?

I’m not getting any error at all. When the shortcode is included in the page, the page content, sidebar and page footer just disappear. All I get is the site header, the page title and where the other stuff should be is just blank space.

If I remove the shortcode everything returns to normal. It’s like the presence of the shortcode is truncating all other code within the page content and everything that follows it. Here’s an example of what the source code might look like:

<article id="post-84" class="post-84 page type-page status-publish hentry content-page">
	<header class="entry-header">
	<h1 class="entry-title">Part1</h1>
	</header><!-- .entry-header -->

	<div class="entry-content">

	<p>page content goes here</p>
	<h3>Sub-heading</h3>
	<p>Introductory text</p>

	[s2Stream player="jwplayer-v6-rtmp" player_path="/ACCWII/jwplayer/jwplayer.js" player_width="640" player_height="360" file_download="step1.mp4" /]
	<p>conclusion text</p>


	</div><!-- .entry-content -->

	<footer class="entry-utility-page">

	Footer content goes here

	</footer><!-- .entry-utility-page -->

Instead, this is what actually happens

<article id="post-84" class="post-84 page type-page status-publish hentry content-page">
	<header class="entry-header">
	<h1 class="entry-title">Part1</h1>
	</header><!-- .entry-header -->

	<div class="entry-content">
	

It’s not as though it is just the html from shortcode onwards is affected, but even content immediately prior to the shortcode within the same “div” tag is removed. Removing the shortcode restores everthing.

Sorry, I meant to give example links of windows that don’t open in the player. It’s weird, some people don’t get it to open in Chrome and some do, same with Firefox and Safari.

http://seeyourfeelings.com/video/test-video-2-2/ (currently playing black video – i’m trying to work this out on the jw player forums)
http://seeyourfeelings.com/video/test-video-bunny/ (this video plays, if you get the window)

Any help would be much appreciated… thanks in advance.

OK I’ve been doing some more trouble-shooting and decided to build a completely fresh test instance from scratch, testing at each stage, step by step. So, starting with a vanilla installation of WordPress with the 2012 theme and just S2 Member running, using the shortcode I managed to get video playing from the /wp-content/plugins/s2member-files directory.

Next I set up my Amazon S3 Bucket with Access Key and Secret Key and got the video playing from there.

Then I set up S3/CloudFront options with Key Pair ID and Private Key, saved the settings and got confirmation that the settings had been enabled. I waited a while and then checked my CloudFront account and verified that the Stream/Download distributions were deployed and enabled. When I went back to the site the page was truncated again.

So it seems that the problem lies with enabling CloudFront. I’m assuming that I’ve set up the options correctly in S2 Member or else the distributions would not have been configured by S2 Member.

When I removed the CloudFront settings from S2 Member everything was back to normal again, except I can’t stream video without CloudFront.

Any ideas please?

Did you let S2member configure your CF and Bucket permissions etc? Is the crossdomain.xml created and in your bucket?

QUICK UPDATE – PROBLEM SOLVED

Having established that the problem was related to the Cloudfront integration, I disabled it, generated a new key pair and started from scratch. Everything is working OK now. Something obviously must have gone wrong the first time around. The symptoms of the problem didn’t seem to be obviously related which is why I’ve been scratching my head (or should that be tearing my hair out!) over this for the past few days. Anyway, all’s well that ends well.

Cheers

Glad to hear that you solved your issue. :-)