#1934 - Upgrading to JWPlayer Pro

This is a spacer post for a website comment topic. The content this topic relates to: #1934 - Upgrading to JWPlayer Pro
It's not something we have any official process for. Once we integrate a library, it becomes a part of Composr as we're concerned, so may have it's code tweaked and restructured to be more seamless. However, its probably possible to do without too much pain.

In short:

Put all the code from the JS files in the JAVASCRIPT_JWPLAYER.tpl template. But make sure these lines stay at the top:
{$,Parser hint: pure}
{$,Parser hint: .innerHTML okay}

Put the SWF file over data/flvplayer.swf
OR adjust any templates referencing flvplayer.swf (e.g. ATTACHMENT_FLV.tpl) to point to the new path.

Okay, will give it a whirl. I assume anyone else who plans to extensively use video may want to use the Pro version so I thought this would be a useful tutorial. I know you can use skins and some other extensions too, but I accept your stance.
Let me rephrase my answer a bit... with templating people can use whatever player(s) they want. As for the exact steps you'd need to do for any particular player, that's undefined, because it really depends on what HTML and files the player comes with. jwplayer isn't given any special status beyond it being the one we integrated by default, that's what I was trying to say.
That makes it much clearer, though still with JW Player as default I think a tutorial on upgrading to the Pro version would be useful but I am happy to write it up and stick it on the CEDI (if I succeed, need to work out where to put the license key).
Please do, and also mention in here. For v10 we're converting all community docs into the normal pattern of tutorials, so I'll make sure it gets converted over :).
Well I just uploaded an flv and an mp4 to a video gallery, and the title isn't showing and neither video loads so it seems JW Player isn't currently working correctly on v9. Uploaded thumbnail is showing for both. I will try this again later on a live domain though, just to be sure.

The Pro version actually has 2 different js files, jwplayer.js nd jwplayer.html5.js, and I'm not sure they are supposed to go into the same template, but again, I will have a proper look at what is in your template and theirs and how it might fit together in the JWPLAYER.tpl

Not expecting solutions, just reporting what might an issue before I even attempt this.
Just took a look in Waterfox. No playback issue. Make sure you used an h264 codec file, .mp4 is not enough.

There was an issue with titles in flow mode:
http://compo.sr/tracker/view.php?id=1943

"The Pro version actually has 2 different js files, jwplayer.js and jwplayer.html5.js, and I'm not sure they are supposed to go into the same template" yeah typically. Match the order it asks you to include them with. That said it is possible it uses an autoloader system, in which case somehow it needs to be disabled or coded to know how to load the dependent JS file.

Note that you can avoid using JS templates entirely and do a more conventional HTML integration. Replace {$REQUIRE_JAVASCRIPT,javascript_jwplayer} with the <script> code it tells you to put into the header, basically. We use templates for all the JS libs we integrated, for reasons of tidiness, but you don't need to.
The mp4 was downloaded from youtube with a handy greasemonkey script, I thought it would be h264. Pulled the flv the same way, and as jwplayer has been renamed flvplayer I tried the flv first.

Might be easier to just add the <script> directly, didn't think of that and will probably just do that, but I will look at the templates first and see if I can get it working that way. flvplayer isn't in the data directory on v10, but maybe it moved somewhere else.
Tried uploading a 720HD video from youtube, and I have read that they are h264 encoded (not sure about the lower resolutions they provide), but the player isn't showing. Thumbnail from YouTube is only thing on the page and it is indented quite a way on both Waterfox and Chrome.
Actually, I will still try to write the steps to upgrade JW Player if I manage to work it out, but as you said any player could be used I reckon <a href="http://mediaelementjs.com/" target="_blank">MediaElement.js</a> is a better solution for me, and according to JW Player license terms that I just read, you cannot distribute the free version in a CMS or site that has advertising.
We have a redistribution license for JWplayer.

I'll take a look at your stock v9 issue, but I'd need to have a link to check it. It's probably some JS error.
This is on localhost, so can't provide a link. I did have some vhosts set up with WAMP Stack, but haven't done that yet with the Bitnami Stack. If you're not able to reproduce my issues then I wouldn't want you wasting time on them. Gonna see if I can get MediaElement.js to work, I like their fallforward solution and there is no Pro version to worry about.
From the MediaElement.js page:- Magic happens, and then IE6-8 supports <video> and <audio>, Firefox and Opera support h.264, and Safari and IE9 support WebM (*if Adobe makes good on promises to support VP8 in Flash).

Which implies that Firefox doesn't support h.264, yet according to the YouTube HTML5 page Waterfox does (even though it doesn't play well with Composr in some cases).
Fixed, I had left the license key at the top of the template and reverted to the Composr version of the player. Though as the key was inside <script> tags I have no idea why it interfered. It gave an error in firebug about the key and also

ReferenceError: jwplayer is not defined
http://127.0.0.1/Composr/site/index.php?page=galleries&type=video&id=frantic-amber&wide=1&max=12
Line 430

Fine without the key, though their instructions say put it at the top of the js file.
Well I say fixed, it stops playing the video after about 30 seconds despite the loading bar having fully completed. Seeking also confuses it to the point a refresh is needed to load the video again.
Messed about with this a few more times, not really got any further forward as it doesn't like the license key being place anywhere. Still getting issues with playback. Was hoping you might think MediaElement was a better fit for Composr (no branding like JWPlayer is another selling point surely). Had no issues playing any of my files with MediaElement.js and I hope you consider bundling it instead of JWPlayer (just like WordPress and some others have).
I don't want to rock the boat. These media players all have quirks, so we could be pulling out little issues for a while if we change it.

You posted a comment about upgrading jwplayer, but you may have deleted it. An issue here is that we support IE8 on the frontend still, but jwplayer 7 does not. I'll add a note in our topic tracking our browser support about this.
Yeah, I got confused by their website saying the latest version doesn't have the branding logo but I think that relates to their hosted version. The branding was one of the reasons I wished to use the Pro version, but that didn't work out well. I did try replacing the 2 files Composr uses with the latest versions but it wasn't that straightforward either. I would personally prefer the youtube branding over the JW Player branding (which makes having an integrated player pointless for me) and I proposed MediaElement was a better solution as lots of projects seem to have opted for it in the open source arena and it doesn't have any branding at all (plus I liked the way it handled everything smoothly regardless of device and the useful addons). Anyhow, not pushing the issue but if JW Player is staying then maybe some instructions on how to override it with a different player would be useful (you said any other player could be used). There are references to jwplayer in several Composr files according to FileSeek and I don't want to create a problem by trying to solve what I see as a problem, and I also think the little issues might be worth it if you do switch. Have you had chance to look at MediaElement?

Taking a look at it, as you've helped out so much with v10 testing.
I've just done a review.

Considering flash fallback, audio support, general compatibility, openness...

mediaelement.js and VideoJS are the standout options. Projekktor came close "on paper", but was relatively clunky and less popular. flowplayer also came close, but doesn't support audio as well. I agree mediaelement.js has a slight lead over VideoJS, so I'll have a shot at integrating it.
#2165
0 guests and 0 members have recently viewed this.