For .AVI .WMV vids played in FireFox, the height must be set with an extra +46 pixels to compensate for windows media player's toolbar.
If your video is 640x480, you must set the dimensions in jquery media's admin menu to 640x526.
IE7 displays a larger media player toolbar than Firefox and the height must be adjusted even higher, to 640x544. Once you do this, the black bars return to videos played in Firefox.
Of course the dilemma is, do you make the dimensions perfect for FireFox or IE users?
I would be very happy to see the height issue between browsers fixed in the next release. Also, support for the JW-WMV player would be fantastic as well.
Horatio Cornwallis III
|
4 years 48 weeks ago
|
view
|
reply
this was a great help for me. very detailed and well edited. you have a good presentation style. i just have a question...
where does the player have to reside? in the folder where filefield is putting the actual media or in the jquery media module folder?
i have added the mdoules as described, but they show up still as a clickable link which then opens a new page and they play in the center. no matter what i tweak, im stuck at the stage of the video where you see the media, but its not being sniffed out. to make a long story short, where does the player have to reside so that it sniffs out the filefield embedded media.
thanks a lot sean...i look forward to more therapy!
Great tutorial Sean. This is such a great solution.
I have a question maybe someone can assist with. Using JW Player and uploading mp3's, but it's creating a large black video area that is not needed. Don't want to make default size changes in the jqmedia area to w=400 h=20 because that will affect things that we do for video files.
Can someone point me to what I would need to do to make the player adjust for whatever is being called - mp3, flv, mov, etc.?
This is delightful! I've been using variations on this technique for the past nine months or so, and it works great. It is a great recipe, in general, for progressive enhancement.
Note: The jQuery media plugin has a few bugs which I've been meaning to submit back as a patch to the project.
You can change the player chosen for a given format, although it currently requires a manual call to the jQuery Media plug-in. See http://malsup.com/jquery/media/ for more instructions; in this case, you would need to call the jQuery function $.fn.media.mapFormat. Unfortunately, there is currently no UI element for this built into the module; maybe I can add that into the next release.
Hello...thanks for the screencast...this works like gem..but now i have a question...does the video always have to be played in quicktime player...can't i say use vlc player instead?...
I'm migrating our college website onto Drupal and used your method for our video testimonials page using a list view.
It works as intended except for some reason the DIV containers for each list item aren't coming out properly. In my list template I tried putting a 20 pixel spacer between videos (by putting an image spacer at the bottom of the template) but it has no effect. When I look at the DIV's using Firebug the container size isn't big enough to hold the entire video and two 350 pixel tall videos end up in a div container about half that size. Dunno what's up think I'm going to have to use some HTML tables in my list template.
I did make two minor tweaks - I put a display: none on the CSS class that outputs the media type icon and I also removed the javascript inside the jquery media that outputs the filename.
Great tutorial as always! Just a few short months ago, setting up a similar interface that would work as smoothly would have easily taken an hour or more, assuming the developer had a good understanding of the necessary modules. And even then, it was difficult to get working properly.
Now you've done it publicly in thirteen minutes, and that's while you're taking the time to talk about it!
Other benefits of using this fantastic combo: it's automatically standards compliant (even degrading gracefully to a link to the media if someone has javascript turned off); works with flash video and audio just as easily; supports various flash video players out of the box, such as the JW FLV Media Player or Wimpy; and lots of other advanced features. And it's light-weight to boot!
Thanks for the excellent tutorial! I look forward to seeing more in the future.
Yes, it will work just fine for D5 - I learned this recipe in d5 first. Aaron actually ported his jQuery Media module to 6 when I threatened to screencast about it, so thanks to him for both versions.
Yeah, yust succeedd the other two screencasts and was thinking: damn, there could be a new one now and took a quick look at your site. There it as, new and fresh.
thx, keep on doing that, and i am going to be a Drupal prof soon ;)
Recently, someone said:
Thank you, this tutorial was helpful and got right to the heart of the problem I was trying to solve.
I got some display problem with filefield
Let's some screen captures
some fields are mess up
http://i108.photobucket.com/albums/n16/adrianmak/Snap1.jpg
there are many empty rows in manage fields
http://i108.photobucket.com/albums/n16/adrianmak/Snap1-200.jpg
http://i108.photobucket.com/albums/n16/adrianmak/Snap2-81.jpg
I solved my video sizing problem.
For .AVI .WMV vids played in FireFox, the height must be set with an extra +46 pixels to compensate for windows media player's toolbar.
If your video is 640x480, you must set the dimensions in jquery media's admin menu to 640x526.
IE7 displays a larger media player toolbar than Firefox and the height must be adjusted even higher, to 640x544. Once you do this, the black bars return to videos played in Firefox.
Of course the dilemma is, do you make the dimensions perfect for FireFox or IE users?
I would be very happy to see the height issue between browsers fixed in the next release. Also, support for the JW-WMV player would be fantastic as well.
The sizing of the media player does not work properly.
My videos are 640x480 AVI. I set the dimensions accordingly, but it plays the video smaller, with huge black bars around the image.
I tried leaving both fields blank, one field blank, or tweaking both to compensate... Nothing worked. I always get the black bars.
This is happening in both firefox and IE.
Please advise.
Hi,
Please could you run through the steps on how to install the player and configure it?
Thanks
John
hi
this was a great help for me. very detailed and well edited. you have a good presentation style. i just have a question...
where does the player have to reside? in the folder where filefield is putting the actual media or in the jquery media module folder?
i have added the mdoules as described, but they show up still as a clickable link which then opens a new page and they play in the center. no matter what i tweak, im stuck at the stage of the video where you see the media, but its not being sniffed out. to make a long story short, where does the player have to reside so that it sniffs out the filefield embedded media.
thanks a lot sean...i look forward to more therapy!
Serrato, I don't have any advice on that point - next best thing is to create an issue on the jQuery Media project:
http://drupal.org/project/issues/jquery_media?projects=238348&states=1
Great tutorial Sean. This is such a great solution.
I have a question maybe someone can assist with. Using JW Player and uploading mp3's, but it's creating a large black video area that is not needed. Don't want to make default size changes in the jqmedia area to w=400 h=20 because that will affect things that we do for video files.
Can someone point me to what I would need to do to make the player adjust for whatever is being called - mp3, flv, mov, etc.?
This is delightful! I've been using variations on this technique for the past nine months or so, and it works great. It is a great recipe, in general, for progressive enhancement.
Note: The jQuery media plugin has a few bugs which I've been meaning to submit back as a patch to the project.
You can change the player chosen for a given format, although it currently requires a manual call to the jQuery Media plug-in. See http://malsup.com/jquery/media/ for more instructions; in this case, you would need to call the jQuery function $.fn.media.mapFormat. Unfortunately, there is currently no UI element for this built into the module; maybe I can add that into the next release.
Hello...thanks for the screencast...this works like gem..but now i have a question...does the video always have to be played in quicktime player...can't i say use vlc player instead?...
I'm migrating our college website onto Drupal and used your method for our video testimonials page using a list view.
It works as intended except for some reason the DIV containers for each list item aren't coming out properly. In my list template I tried putting a 20 pixel spacer between videos (by putting an image spacer at the bottom of the template) but it has no effect. When I look at the DIV's using Firebug the container size isn't big enough to hold the entire video and two 350 pixel tall videos end up in a div container about half that size. Dunno what's up think I'm going to have to use some HTML tables in my list template.
I did make two minor tweaks - I put a display: none on the CSS class that outputs the media type icon and I also removed the javascript inside the jquery media that outputs the filename.
Thanks for the vid!
Great tutorial as always! Just a few short months ago, setting up a similar interface that would work as smoothly would have easily taken an hour or more, assuming the developer had a good understanding of the necessary modules. And even then, it was difficult to get working properly.
Now you've done it publicly in thirteen minutes, and that's while you're taking the time to talk about it!
Other benefits of using this fantastic combo: it's automatically standards compliant (even degrading gracefully to a link to the media if someone has javascript turned off); works with flash video and audio just as easily; supports various flash video players out of the box, such as the JW FLV Media Player or Wimpy; and lots of other advanced features. And it's light-weight to boot!
Thanks for the excellent tutorial! I look forward to seeing more in the future.
Aaron
LOL. Thanks for the note, Jakob.
Great post, a really useful video, this will totally change the way that I organise the latest site i'm working on.
Cool. Tried it and works great. Clear and accurate. Thanks!
Holy shit, I had no idea that stuff like this can be done with filefield! And I'm co-maintaining that module :P
Awesome video, as always :)
You just made my life so much easier. Thanks for the awesome screencast.
Thank you very much!
Your screencast is the best of them I have seen ever.
You explain Clearly, and neatly.
Thank you so much.
I look forward to seeing more screencast from you.
Yes, it will work just fine for D5 - I learned this recipe in d5 first. Aaron actually ported his jQuery Media module to 6 when I threatened to screencast about it, so thanks to him for both versions.
FeedAPI mapper itself allows assignment of taxonomy terms based on elements from the feed that you can map to a vocabulary as demonstrated in this screencast:
http://www.developmentseed.org/blog/2007/oct/30/pick-it-feed-stick-it-node
thx for your great work again. Keep on doing that and i am going to be a drupal prf soon;)
Yeah, yust succeedd the other two screencasts and was thinking: damn, there could be a new one now and took a quick look at your site. There it as, new and fresh.
thx, keep on doing that, and i am going to be a Drupal prof soon ;)
True-ly therapeutic! Great job Sean. This Drupal screencast also has the best video backdrop ever ;)
I'll prescribe this video to my friends --that's for sure.
Thanks for the great screencast.
Your example is using Drupal 6. Am I right to assume there is no way to do this with Drupal 5?