One of the beauties of the the JW Player 5 is it's ability to embed MP4 videos via HTML5 video tag when the visitor doesn't have Flash or is using an iPhone or iPad... Currently I'm using SWFTools with JWPlayer5 along with the Video Module with Zencoder MP4 file conversion and Amazon S3 storage. It's too perfect and needed no server config or installations to achieve!! The only issue I had was testing it on iPhone where it showed the "No Flash player found" type message. I couldn't stop there, so I created a module based on the SWFObject2 submodule. This gives you the ability to choose the JW Embedder method that comes with the JW Player 5. I attached it if anyone needs it.

NOTE: It's working perfectly with JW 5.6, and havn't tested it with JW 5.7 yet. Just make sure the jwplayer.js file is inside the sites/all/libraries/mediaplayer-5 directory next to the player.swf file.

It would be great to have the JW Embedder option shipped with the SWFTools 6-x.3. Otherwise were not using the JW Player to its full ability. The JW docs recommends using it over anything else.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Josephnewyork’s picture

FileSize
2.26 KB

Here is an update. It now supports a custom logo (if using the licensed player), and skins. Sizing bug fixed.

Currently doesn't support:
Playlists, Colors, Stretching, Plug Ins, Repeating, Volume, Logo Link & target, and Events.

Basically the most important options are there, so feel free to use. Options above will eventually be finished time persisting.

prasannah.ganeshan’s picture

does it support Drupal 7 at the moment. I have requirement to have this feature for a Drupal 7 based website.

Andrupal’s picture

I am thrilled to hear of your solution, but have been struggling forever to get this to work, without luck....

I too use Amazon S3 and Zencoder through the Video module. I had SWFObject2 method working fine as well, and it worked with both JWPlayer 5.7 and JWPlayer 5.6, though not with iPad or iPhone.

I have only mp4 file types on the site, assuming that an mp4 can be presented in the fallback method as either flash or HTML5, depending upon the device (is this correct, or do I need to encode and store multiple file types?)...

For the SWFObject2 method, after countless hours of struggle, I got the following basic config options working fine, albeit with out iPhone/iPad support:

1) SWFTools JW Player 5 Sub-Module enabled
2) CCK display format set to "Video" (Note: when I try using SWF tools as the CCK format, the player doesn't look for the correctly encoded Zencoder file, and I've had no luck trying to set the file-hander "Media directory" to work correctly for Amazon S3 source in SWFTools...the correct rewrite of the Amazon S3 file source seems to be done by Video module.)
3) Video module's player settings for mp4 set to "FLV Player" -> "SWF Tools"
4) JWPlayer 5 installed in "sites/all/libraries/mediaplayer-5" folder with renaming of the "player.swf" file to "jwplayer-viral.swf" in the mediaplayer-5 folder.
5) Selection of JWPLayer 5 for all playback options in SWFTools module.

This arrangement is still a little buggy and intermittently results in cropped preview images, apparently the result of a mismatch in JWPLayer scale attributes that I can't figure out.

Since you built the JWEmbedder module based on the SWFObject2 method, I assumed it would work roughly the same way as above, with only minor changes to config, but I can't get anything to work after trying nearly every possible option.

Can you provide documentation of how the Video and SWFTools modules need to be configured to allow your solution to work?

Josephnewyork’s picture

Sure, I'll provide a simple tutorial in using it once I get a second, and replace this comment. Let me know if you figured it out in the mean-time.

Juc1’s picture

@ Joe, this sounds good and I would also be interested in your tutorial. Just to check - SWFtools with JW player is enough to upload and play MP4 movies so I don't think that 'the Video Module with Zencoder MP4 file conversion and Amazon S3 storage' mentioned in your first post are necessary for your module?

Thanks

Josephnewyork’s picture

Hey Juc1, your right, they aren't necessary, I guess I'm just a fan of the combo: Video+S3+Zencoder+SWFTools/JWPlayer+JWEmbedder. Its beautiful.

In the the tutorial, I'm going to go through everything because I don't think videos should be streamed locally or content creators should be relied on to convert to MPEG4. Just my opinion. I will mention which steps are optional since this is inside of the SWF Tools Module Project.

prasannah.ganeshan, I won't be converting the module to D7 any time soon as I haven't needed it yet. I'm sure I will soon enough though.

Juc1’s picture

@ Joe, ok thanks.

rickvug’s picture

@Joe Weitzel If/when you look to use JW Player in Drupal 7 be sure to check out http://drupal.org/project/jw_player. I think there's some advantages of having a module specifically for JW Player. Helpful feedback and patches always welcome. :)

dwees’s picture

Hey Joe,

There is a small error in the module you've set up. It's easy to fix.

You need to wrap the script call to jwplayer with:

$script = "$(document).ready(function () {";

and

$script .= "});";

Josephnewyork’s picture

Yeah, I will have a look, but since SWFTools isn't in D7, I think this jw_player module will be sufficient. In fact, unless we can't get the jw_player mod out of the red before my next D7 video site, I have no reason to create the a solution for JWEmbedder. Looking forward to the stable rickvug!

Josephnewyork’s picture

Hey Dwees,

The JWEmbedder handles the ready listener already as far as I understood... I can look into this further if your seeing an actual issue. In the docs, the setup is plain javascript with no load or ready listeners:

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/15...

Cheers!

VVVi’s picture

For using a jw_player formatter for video, just add to your module next hook:

/**
* Implementation of hook_field_formatter_info_alter()
*/
function yourmodulename_field_formatter_info_alter(&$info) {
  // Let a video field type use a jw_player formatter.
  $info['jw_player']['field types'][] = 'video';
}
QuickDraw’s picture

This works well except when I try to load a video from Lightbox. I get the missing Flash content error message (on any browser/platform). I've also tried Colorbox with the same result.

lightsurge’s picture

I can't get this module to work, having the same issues as #3

The div id for the video which should be altered by SWF tools is there, but it doesn't get converted into a video by javascript, no errors though. jwplayer.js is loaded, and the embedding method set. I've tested using what you described besides using zencoder or amazon s3 (I'm just using handbrake and local storage), and the same versions of JW and SWF tools. I followed pretty much the same steps as @Andrupal except I didn't really understand why 'renaming of the "player.swf" file to "jwplayer-viral.swf"' would be necessary, but I tried it - made no difference.

Having said that, I'm not sure I totally understand what this is for as I had Flash working fine as a fallback against using the tag by itself (just by selecting HTML5 player in Video module)... isn't that enough? Won't ipads/iphones work with this?

Does this just make it look a bit prettier by wrapping some kind of non-flash version of JW player around it with a few bits of extra functionality? I only really need pause and skip!

jhrizz’s picture

I am getting same as #3 it breaks the "normal" browser based embed as well. Any hints?

Thanks!

aaron’s picture

FileSize
3.72 KB

the module attached to this update uses the javascript recommended by longtail to display the player with html5 fallback.

aaron’s picture

note that you would 1st have to define $conf['amazon_s3_cf_domain'] = 'sXXXXXXXX.cloudfront.net'; and $conf['amazon_s3_cf_domain_non_streaming'] = 'dXXXXXXXX.cloudfront.net'; in settings.php.

mfuller526’s picture

Title: JW Embedder Embeding for JW Player 5 - MPEG4 -> Flash and HTML5 handeling » JW Embedder Embedding for JW Player 5 - MPEG4 -> Flash and HTML5 handling
Issue summary: View changes

Spelling corrections in title: Embeding > Embedding, Handeling > Handling