Is this (awesome) module supposed to work with any FLV/MP3 player? Or are there special things to watch out for, such as the way flashvars are passed and such? I tried using the 1pixelout player for MP3s (http://www.1pixelout.net/code/audio-player-wordpress-plugin/), but it just keeps buffering ... Any ideas on how to get this to work?

CommentFileSizeAuthor
#9 flv, mp3 same jquery media player size.jpg17.99 KBcarole

Comments

brunodbo’s picture

brunodbo
he/him
commented

Or are there special things to watch out for, such as the way flashvars are passed and such?

Looks like it: if I use 'soundFile=...' instead of 'file=...' in the flashvars, it works fine with the 1pixelout MP3 player.

brunodbo’s picture

brunodbo
he/him
commented

Ok, this is what I got so far:

Thanks to Aaron's kind help, I managed to send the 'soundFile' flashvar to the embed code using drupal_add_js():

<?php 
  drupal_add_js(
    "if (Drupal.jsEnabled) {
	  $(document).ready(function(){  
        $('#media-audio-$node->nid').media( { flashvars: { soundFile: '/{$node->field_audio[0]['filepath']}' }, width: 200, height: 80 } );
	  });
    };",
	'inline'
  );
?>

This results in the following embed code:

<embed width="200" height="80" flashvars="file=/files/my_audio_file.mp3&soundFile=/files/my_audio_file.mp3" autoplay="false" bgcolor="#ffffff" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash" src="mediaplayer.swf?file=/files/my_audio_file.mp3" style="display: block;"/>

There are two more problems here:

1) The code above seems to revert everything to jQuery Media's default settings (as documented at http://www.malsup.com/jquery/media/#options). I can override the width and height, but not the mp3Player: mediaplayer.swf (jQuery Media's default mp3 player) is being loaded, even though my 'default mp3Player' setting (entered at /admin/settings/jq) is being printed nicely in the head of the page:

$.fn.media.defaults.mp3Player = '/1pixelout.swf';

2) For the 1pixelout player to work, also the 'src' attribute of the embed element needs to contain 'soudFile=...' (it doesn't, even when soundFile is correctly inserted in the flashvars). I don't immediately see a way to override that.

brunodbo’s picture

brunodbo
he/him
commented

FYI, using

<?php 
  drupal_add_js(
    "if (Drupal.jsEnabled) {
	  $(document).ready(function(){  
        $('#media-audio-$node->nid').media( { flashvars: { soundFile: '/{$node->field_audio[0]['filepath']}' }, width: 200, height: 80, mp3player: '/sites/all/themes/indymedia/players/1pixelout.swf' } );
	  });
    };",
	'inline'
  );
?>

doesn't let me override the mp3 player setting. The embed src attribute still contains 'mediaplayer.swf'.

mach5_kel’s picture

mach5_kel commented

Same Issue. Trying to get 1pixelout to work with JQuery Media. Have no clue where to go from here.

kulfi’s picture

kulfi commented

@brunodbo, what is '/{$node->field_audio[0]['filepath']}' doing? (I'm trying to use jquery_media with core upload module)

UPDATE: The following hack gets the module working for 1pixelout:

jquery.media.js, line 364

    //opts.src = opts.src + '?file=' + src;
    opts.src = opts.src;
    opts.flashvars = $.extend({}, { soundFile: src }, opts.flashvars );
carole’s picture

carole commented
Title: Works with any FLV/mp3 player? » Works with any FLV/mp3 player?

I've got the same issue with Drupal 6. Has anyone tested a work around for that?

thanks

chasz’s picture

chasz commented
Version: 5.x-1.0 » 6.x-1.4-beta1
Status: Active » Needs review

How does this affect the normal player?? i would still like to use the other FLV players for video

dmurphy’s picture

dmurphy commented

SWF tools is integrated with 1pixelout, and I think it's easier to use. To use SWF Tools, you just use:

<?php print swf("exmple.mp3"); ?>

That will display whatever player you have configured for MP3s.

carole’s picture

carole commented
StatusFileSize
new flv, mp3 same jquery media player size.jpg17.99 KB

dmurphy, I'm actually trying to use SWF Tools as a work around. I want to get a player to display user-generated audio & video content nicely. Here's where I'm at with it:

1) JQuery media works on my filefield attachments, but the mp3 and flv players are the same size. Even when I configured 1pixelout as the mp3 player, it appears in a blank

the same size as the video player (whether I set the default sizes to 0x0, blank, or a setting). It doesn't look nice. Worse than that, the 1pixelout player just buffers the content; it never plays. So I went back to the too-big JWplayer.

2) SWF Tools looks great for embedded media, but I can't get it to display attached filefields, which is how my "add content" form works.

Any ideas? I'm in D6, and I'd love to try CCK audio for the mp3, but it's not ready. I've attached a screen print.

Update Sept 12:
I'm trying to implement two solutions; I'll let you know which works first.

a) See this great tutorial by Aaron Winborn, http://aaronwinborn.com/blogs/aaron/how-use-jquery-media-audio-video. It's not working for me yet; must be a user error.

b) See ktowle's suggestion in comment #10, below. Ktowle, where do I put the code?

ktowle’s picture

ktowle commented

I struggled with this for a while, and finally found a solution using the jquery.metadata plugin and setting options in the class - the following code gives me an audio player just 20px high, which is the control bar:

<?php drupal_add_js('misc/jquery.metadata/jquery.metadata.js'); ?>
<div class="field field-type-file field-field-test-audio-file">
  <?php print l($node->title, $node->field_test_audio_file[0]['filepath'], array('class' => 'media {height:20}')); ?>
</div>
chasz’s picture

chasz commented

have u got a screenshot please :D

eriknewby’s picture

eriknewby commented

Thanks ulfk!
worked great for me! I have spent several days trying to get a solution to this.

abu3abdalla’s picture

abu3abdalla commented

Thanks ulfk!
seems its working

mimhakkuh’s picture

mimhakkuh commented

One more thx to ulfk! works like a charm :)

geerlingguy’s picture

geerlingguy commented

In response to #5 above:

I think you'll need to make the change to lines 315-316 instead, now. paste this code in 315-316's place (in the jquery.media.js file inside the js folder):

    //opts.src = opts.src + '?file=' + src;
  opts.src = opts.src
    //opts.flashvars = $.extend({}, { file: src }, opts.flashvars );
  opts.flashvars = $.extend({}, { soundFile: src }, opts.flashvars );

Basically, this comments out the code that's wrong, and pastes in the proper code for 1pixelout.

aaron’s picture

aaron commented
Status: Needs review » Active

unfortunately, #15 still seems to be the best way to handle this. means you can't use 1pxout and longtail on the same server w/ jquery media.

i'm definitely interested in finding a better way to handle this, if it ends up back on anyone's radar.

armyofda12mnkeys’s picture

armyofda12mnkeys commented

Think the new jquery.media.js file might handle it as it doesn't set the 'src' attr but uses a key to do it...
i dunno though... I just used what was packaged with the module and did this so I can use flv player and mp3 player by setting attribute accordingly:

// map flv and mp3 files to the swf player by default
$.fn.media.flv = $.fn.media.mp3 = function(el, opts) {
    var src = opts.src;
    var player = /\.mp3\b/i.test(src) ? $.fn.media.defaults.mp3Player : $.fn.media.defaults.flvPlayer;
    opts.src = player;

	if ( /\.mp3\b/i.test(src) ) {
	  opts.flashvars = $.extend({}, { soundFile: src }, opts.flashvars );		
	} else { 
	  opts.src = opts.src + '?file=' + src;
	  opts.flashvars = $.extend({}, { file: src }, opts.flashvars );	
	}		
	
    return $.fn.media.swf(el, opts);
};