JW HTML5 Player Plugin for WordPress
by Thai on June 13, 2010
This is a plugin for WordPress and it will allow you to post your video with JW’s HTML5 player. It’s just an early release to utilize HTML5′s video capability. The script has been tested with Firefox 3.6.3, Safari 5, and Chrome 5.03. I also tested the plugin under WordPress 3.0 RC3 so it’s ready for the next version. Browsers that don’t support HTML5 video’s tag will fallback to the Flash player.
12-06-11
08-23-10
If you have the jQuery lightbox plugin, this plugin will have issues with it because the lightbox script conflicts with JW’s player. Due to the nature of lightbox, it’s loaded with all of WP’s pages. I will look into this and work around it.
08-16-10
Re-wrote the way the player’s code is initialized. It will auto detect the plugin’s directory for the skin and swf file.
08-08-10
I re-wrote the plugin so that it’s cleaner and meaner. Namepace collision shouldn’t be an issue since I used prefixes for the functions and it’s wrapped in a class wrapper. I didn’t know loading JS files was going to be a huge hurdle with WP. There was barely any resources online and it seems like most devs had the same issue. Now I’m a little wiser about the process, I think I’m going to help out others on Stackoverflow. Please be warned that this is an early build so let me know of any bugs. The plugin is now 0.0.4!
08-02-10
Fixed so that it shouldn’t load actions in the Admin area and jQuery’s library is loaded directly from WordPress’s directory. It’s not a major update but a little something something.
08-01-10
Reverted the skin’s xml to the original file because the minify one was causing issues with IE. One feature that I like about the player is displaying a playlist and I’m thinking about ways to get it going. I’m going to play around with the possibility of an admin panel.
07-27-10
Fixed an issue with how it was loading the skin. PHP generates a JavaScript file and detects the path to the xml skin and swf files under the plugin’s folder. It sorta auto detects your WP installation directories. The script assumes that the “wp-content” folder lives under the root of the domain. I’ll figure out a better way to detect it but for now it’s a fix.
07-25-10
I had to rework the loading of jQuery to accommodate WP’s final launch. I must admit that it’s getting sweeter. I fixed the loading issues which Marc pointed out and it’ll load jQuery before the other dependent files. This plugin is just to demonstrate Longtail’s new player and the neat things you can do with HTML5. I’m excited by all the things that people are doing with it so being able to get positive feedback is one reason why the web community is an outstanding group of people.
Updates
NEW Bug Fix for WP: Only loads with shortcode
NEW Bug Fix for WP: Shouldn’t load in Admin
NEW Bug Fix for IE: Works in IE again
NEW Bug Fix for WP 3: jQuery library loads from WP directory
NEW Bug Fix: Fixed issue when loading the player’s skin
Working On
-Autoplay
-Volume control on autoplay
-Wordpress backwards compatibility
-Update automatically via WordPress’s SVN
-Display poster
-Display playlist for videos
Plugin Features
-Only load dependencies when used by shortcode
-WordPress backwards compatible(compatible with 3.0)
-IE Friendly
Installation
1. Unzip the goodies and upload the folder to your ‘plugins’ folder under the ‘wp-content’ directory.
2. Activate it via the Plugin Admin’s area or upload directly within WP’s admin’s CP.
3. Use the shortcode in your entry to post the video.
Source File
To insert your video in the post just have to upload a video with the Media Manager and copy the source from the Link URL field. If you can’t increase the upload size for WP, then upload your video with an FTP program and link it that way. The next version will support other formats but for now you can upload MP4.
The Shortcode
To embed the player, add this with your desired dimension in your post. By default the plugin will set it to 480 x 320.
It’s as simple as adding the video URL to the shortcode and setting the dimensions. If you have any issues with the plugin please email me or comment your issue and I will walk you through it. Check back for more updates!
28 comments
The plugin was causing me not to be able to switch between view mode an html mode when editing post/pages
by scott on June 30, 2010 at 10:29 am. #
I sincerely apologize for the bug. I had no idea it was doing that so I will fix it and release it with the next version. I super appreciate the feedback. Can you email me the version of WordPress you are you running?
by Thai on July 1, 2010 at 8:51 am. #
Great plugin! Seeing the same prob with not being able to switch as well…Running wordpress 3.0
Plugin is working with .mp4 great…
Here’s a link to one video: http://www.sweptawaywithjenniferbroome.com/wordpress/a-day-in-mexicos-triangulo-del-sol/
by Ed on July 10, 2010 at 9:39 pm. #
Also, in the shortcode, what do we need to enter in there for the allowfullscreen and autostart to work?
thanks again..
Ed
by Ed on July 10, 2010 at 9:41 pm. #
Hi,
I’ve installed and activated the plugin, using WP 3.0 on my locally on my machine.
I deactivated the jwplayer plugin made by jw too.
However, when I copy and paste the shortcode:
[jw_html5 src="http://www.bionicworks.com/php/playlist/vids/video2.mp4" width="720" height="480"]
nothing shows on the page.
In Source code i do see this:
I’m using the very latest Chrome browser so that shouldnt be a problem either. Any ideas where I’m going wrong?
Thanks for the help.
by Marc on July 12, 2010 at 9:30 am. #
Hmm, weird. Just noticing that there is a space where the video should be, blank.
If i right click on the area i get video controls.
So for some reason it’s not displaying anything.
I came back to the page after 5 minutes and i did actually see a still from the mp4, but there were no controls and i couldn’t make it do anything.
By the way I’m linking to the video on this post so as to be sure it’s not a video formatting issue.
To be extra sure I’m using the twenty ten default template to be sure it’s not a template issue.
Thanks.
by Marc on July 12, 2010 at 9:36 am. #
OK, sorry but theres more now… If I go back to the page that took a minute+ to load the preview image, and right click to get the menu, and click play, i can play the video, but there are no controls rendering for it.
Thanks
by Marc on July 12, 2010 at 9:39 am. #
@ Ed Thank you so much Ed! It means a lot so please let me know what I can do to improve the plugin. It’s rather new but it’s a start. I took a look at your page and notice the shortcode isn’t working properly. Right now the plugin doesn’t support full screen and autostart. Because of your feedback, I will include it in the next release. I thought autostart was something people aren’t going to use but you proved me wrong. As for the full screen ability, the player doesn’t support it yet. I will add it when they up the player. Once I get those going I will be certain to let you know.
by Thai on July 12, 2010 at 12:20 pm. #
@ Marc Could you email me the path to your ‘wp-content’ folder? I think it may be because of where the plugin folder lives and you may need to hardcode the paths. I’m still trying to figure out a way to auto detect the paths the dependent files. You can go into Plugins > JW HTML5 Plugin for WordPress > Edit and hard code your site’s path. I’ll write it in for you if you like. Just shot me an email and I’d love to take care of it for you.
Thank you so much for letting me know of these issues. I’ll do my best to help you out.
by Thai on July 12, 2010 at 12:35 pm. #
[...] JW HTML5 Player Plugin for WordPress (tags: wordpress html5 player video plugin) [...]
by And He Blogs » links for 2010-07-22 on July 22, 2010 at 11:32 am. #
The .0.0.2 version is not working. It causes errors.
by Andre A on July 26, 2010 at 10:31 am. #
@ Andre A Thank you for the error message. I will work on this tonight and push out some fixes. Your input is greatly appreciated.
by Thai on July 26, 2010 at 12:44 pm. #
Getting the same error. I also can not post to wp, change settings, hell i can’t do anything.
by Andre A on July 27, 2010 at 10:02 pm. #
@Andre Hmm… I’ll look into this and correct any issues so this is on my to-do list.
by Thai on July 27, 2010 at 10:42 pm. #
I am gonna try this one now.
by Andre A on August 2, 2010 at 6:01 pm. #
Still getting the redeclare crap. Is there anyway you can stop the plugin from asking for that add_js()
by Andre A on August 2, 2010 at 6:06 pm. #
I’m trying to figure out why it does that and I think I might know why but I have to do some more testing. Thank you for checking the plugin out! I promise I’ll iron it out. I can’t re-create your error message but I’m researching around.
by Thai on August 2, 2010 at 6:23 pm. #
I feel as if i am the only one testing. Thai is it possible to take the JW Player for WordPress plug in and edit it to use the JW HTML5 player??
by Andre A on August 5, 2010 at 11:21 am. #
I’m grateful that you’re helping me. To be honest with you, this is a soft release and it’s full of bugs. Don’t you worry because I’ve been researching and the next build will be solid. I will be re-writing everything with your feedback in mind. It’s funny cause I can use it without a problem but I realize I should streamline it. Thank you for being patient with me. I’m still learning as a dev.
by Thai on August 5, 2010 at 2:51 pm. #
How do you enable the autostart? Also, the code is forcing the player to get centered over the sidebar in a website I’m developing. Any thoughts on how to fix that?
by Carter M on August 13, 2010 at 10:45 am. #
The feature isn’t in this version but I will write it in when I work on the player’s inialization code next. I’ll try to work in where the user can control the volume when it starts too. As for wonky placement, ill take a look at the CSS closely to see anything weird. Try wrapping the shortcode with a div and position it to see if it’ll move.
Thank you so much for trying the plugin out. Its an honor!
by Thai on August 13, 2010 at 5:52 pm. #
Ok i like that this new version works with mp4 as well as m4v. My only issue is that there is no player skin.
by Andre on August 17, 2010 at 11:09 am. #
Thank you Andre! Your issue is my issue and I will make a fix over the weekend. I’m not too happy about the method for the skin so I’ll come up with something better.
by Thai on August 17, 2010 at 12:10 pm. #
[...] is a WP plugin for WordPress by bionicworks and it will allow you to post your video with JW’s HTML5 player. It’s just an early release [...]
by KEN OTTMANN BLOG » HTML5 Player mit Flash Player Fallback on August 25, 2010 at 8:06 am. #
any updates to the plugin?
by javy on September 22, 2010 at 2:54 pm. #
There will be soon. I’ve been messing with html5 lately and I know I have to add more features to this. Anyway, would you like me to notify you for the next build? I only ask for a cold beer in return.
by Thai on September 22, 2010 at 10:00 pm. #
Please do backwards compatibility. I’m on 2.9 and not 3.0 (will never upgrade most likely).
by Mike on September 28, 2010 at 4:25 am. #
@Mike I’m shocked that this plugin is getting some attention and I will continue put some focus on it. This is something I’ve been doing on my spare time so please be patient with me. I will work on backwards compatibility after my next build. I’m going to notify you as soon as that’s accomplish. Keep the request coming!
How come you aren’t updating to 3.0? You can benefit from the security upgrades.
by Thai on September 28, 2010 at 1:10 pm. #