Share 0
Tweet 0
Share 0

Using JW Player, WordPress, Amazon S3 & Youtube

June 26, 2011
Standard Post
Charly Dwyer
JW Player, Members Only

46 comments

I love JW Player, by Long Tail Video, for my WordPress Blog.  One of the main reasons I like JW Player is because they are implementing HTML 5 support – which means I can add video’s to my website (in MP4 format) and have the videos display on my website and iDevices (iPhone, iPod and iPad).

The other thing I really like, is the way the media management has been implemented into the WordPress Media Library – making inserting videos from Amazon S3, Youtube and other sites outside your WordPress website really easy.

These three videos demonstrate how easy it is to install and use.

Installing and Configuring JW Player

[jwplayer config=”standard” image=”https://acl-training.s3.amazonaws.com/JWPlayer/InstallingAndUsingJWplayer.png” file=[secdl bucket=acl-training path=JWPlayer/Installing%20and%20using%20jwplayer-0.mp4]]

Using JW Player to Display a video hosted on Amazon S3

[jwplayer config=”standard” image=”https://acl-training.s3.amazonaws.com/JWPlayer/DisplayingExternalVideoJWPlayer.png” file=[secdl bucket=acl-training path=JWPlayer/Installing%20and%20using%20jwplayer-1.mp4]]

Displaying a Youtube Video With JW Player

[jwplayer config=”standard” image=”https://acl-training.s3.amazonaws.com/JWPlayer/DisplayingYouTubeVideoJWPlayer.png” file=[secdl bucket=acl-training path=JWPlayer/Installing%20and%20using%20jwplayer-2.mp4]]

About the Author Charly Dwyer

Charly has more than 30 years experience in the IT industry ranging from hands-on technical, to high-level business management, Charly has installed and configured computing equipment and has managed business contracts in excess of $25 million dollars.

As a result, Charly identifies the best way to integrate solutions and technologies for the most cost effective way to achieve a businesses outcome.

Author Box 03

Follow me

Share 0
Share 0
Share your thoughts

Your email address will not be published. Required fields are marked

  1. Hi Charity, I had a problem viewing your second and third video. I get an error on both of them. Looks like the error is coming from Amazon and actually showing your access Id key. Just a heads up.

    Ron

    Reply

  2. Hi Charley,

    I’ve tried implementing as per 2nd video and cannot get it to play. Did you set up a Cloudfront distribution?

    Michael

    Reply

    1. Hi Michael,
      I haven’t done anything particularly special. I use AMAZON S3 distribution, not cloudfront.
      When you say it doesn’t play, what happens? Nothing, or do you get an error?
      Feel free to post a link to the page with the issues and we’ll see if we can help.
      Charly.

      Reply

  3. Hello Charly,
    Any idea why when I add a video from my S3 to my blog, I get the thumbnail photo fine, the video starts with audio but I only have a black screen in the JW player?  It’s a blank black screen the entire video.  Thanks.  I have gone through the instructions a few times and I don’t think I am missing anything.

    Reply

    1. Hi Eric,
      Are you getting any sound at all?
      Typically, the black screen is an encoding issue. I don’t really understand the whole ins and outs of it, and I’m sure there’s a video technoboffin who can explain it in more detail.

      I use Camtasia and AnyDVD Convertor as my two main video production tools and haven’t had any issues – but I have had clients who have created videos and experienced the ‘black’ screen.

      The last time we addressed this, we found this tutorial to be very helpful in resolving the issues:
      http://www.miracletutorials.com/converting-video-tutorials-to-streaming-mp4-for-s3-amazon-using-avs-video-converter/

      One final note – some video convertors will put the “indexing” marker right near the end of the video. This means that the video has to nearly fully download before it will start playing. If you find that your video is just downloading and not playing after a couple of seconds (or less), you need to move the index marker. I’ve used YAMB (http://yamb.unite-video.com/) quite successfully to do this. It doesn’t mess with the video encoding at all, just moves the index marker to the front of the video, so once it starts downloading, the computer gets the “start playing now” instruction sooner.

      HTH
      Charly.

      Reply

      1. Hey Charly,

        Thanks, it worked great!  I recorded the video with Camtasia and changed the indexing.  I’m not sure what fixed it, but it did.  I will just record the same way now in the future.  Thanks!

        Eric

        Reply

  4. Charly, I have a blog that over a year old, with lots of YouTube video already in it.  I am about to dramatically upgrade my site and plan to add S3 streaming and the JW Player.  Do I need to go back through all past posts and re-enter info into the JW Player — or will JW Player co-exist with my current player so that no updating of posts is necessary?

    THANKS for your posts.  Very helpful to me as I prepare to take this big plunge.

    Reply

    1. Hi Thomas,

      I’ve used JW Player with a couple of other video plugins, without issue but there’s no such thing as a sure thing.  Some wordpress video plugins just conflict with each other – you will have to test it, but in the main, I’ve used two plugins on a few sitesw without issue.

      In a lot of cases, I have actually gone back through and updated the codes in my old posts to use the new shortcode, but it can be a lot of work… so I get that you may not want to do that.

      thanks for the lovely comment and I’m glad my posts have been helpful

      Reply

    2. Hi Thomas,  I thought I had responded to your question but obviously not!  In general, most video players will co-exist with each other but you do need to check it out.

      I’ve used JW Player with two or three other plugins and haven’t had any issues.

      Reply

  8. WOW and HELP!  I came across your video on YouTube – it was the BEST for helping me set up JW Player.  Thanks, Charly!

    ***  BUT BUT BUT, when I embed, I can’t get my MP4 video to load in the player.  It tries, but takes forever…  I think I may need to re-encode it to stream better or something?????  I can’t find the answer. Looked everywhere, and am more confused than ever…

    ***   I just want to use Amazon S3, JW Player, and embed a 20-minute video on a wordpress page.

    What settings should I use to encode?  I have “Handbrake.”  I use a Mac.
    Oh, if someone, anyone could just help me!!!

    Please please please can anyone help???  I am kinda new at this and don’t know who to ask or what to do!  :-0  

    THANKS!!!  wolring[at]yahoo.com

    Reply

    1. Hi Loretta!  Thank you for kudo’s.

      Yeah, encoding videos is normally the issue.  I’ve spent hours reviewing issues for some of my clients.

      I’m assuming that your video player shows the swirly thing that indicates that the video will start playing?  But it just shows the black screen – and if you wait long enough, it will eventually play.

      I’m not familiar with Handbrake – and only use a PC.

      Perhaps you could share a link to a video that isn’t working and we can take a look?
      And hopefully, MAC Users who also use Handbrake will chime in too!

      Reply

      1. GOT IT!  I worked on this day and night for DAYS.  Here’s the deal. People have to encode their MP4 videos so that their combined bitrate for audio and video does NOT exceed their viewers’ internet connection speed. So, let’s say your user of the lowest internet connection has a connection of 256 kbps.  You need to encode video around 200 and audio around 56 each for the bitrate settings.

        NEXT and most importantly, this thing called the “moov atom” has to go the FRONT of the video instead of the back – where it makes the video fully load before playing.  Moov atom is some indexing thing for the video.  Normally it’s at the end, but must go at the beginning in order to “stream” the video.  Some people use QTindexSwapper free software,  but if you use Handbrake, just checkmark the “web optimized” box to do this.

        Flash is becoming obsolete – because it does not play on many mobile devices, whereas mp4 formats play on almost anything.

        http://www.handbrake.fr has FREE video encoding software for both Mac AND PC.  It’s awesome and user-freindly.  Also lets you burn/copy your DVD’s, etc., nicely.

        I hope this helps everyone who may ask you similar questions!  I now have NO problems with my videos on JW Player and Amazon S3 and I don’t even use Cloudfront to optimize speed – although you could use that with A S3, to make video delivery even faster.

        Whew!  I really learned far more than I wanted to!

        -Loretta

        Reply

        1. Thanks Loretta. Like you, I’ve learned far more than I wanted to in this regard. I’d just about gotten it working but your tip on the moov atom saved me many more hours of work!

          Reply

        2. I was dealing with the same problem with slow loading videos. Thank you very much for the advice. I found this very helpful! I did a test and my video loads much faster after encoding it with handbrake! I was just wondering if you actually set your bitrate in handbrake to 200 for video? Or just use one of their preset options? In other words, how do you know what your users will use?

          My other question I would like to figure out is how do you get your videos to be a managable size to fit in WordPress but then have the options to have them click on the maximize button and view it larger?

          Here’s what I’m currently doing. Recording with HD camera, inserting my AVCHD clips into preimer elements 9, then edit and encode to H.246 640X480 then reencoding again with handbrake with a preset normal option and weboptimizer. Then load up to Amazon S3 as Charly’s video tutorials show. I also use the JW player.

          I like how fast they load now (I have DSL) but I would like the videos to be able to be maximzed like you can on Charly’s site. Nice and small but option for viewer to maximize. Maybe you know Charly?

          Also eventually I would like to just edit and then encode once. Do you know of any program that can do that with AVCHD?

          Thanks in advance for your help!

          Isaac

          PS Loretta what is your site? I’m curious to see how your videos look and stream.

          Reply

  9. Thanks for the video tutorial Charly.  That’s just what I was looking for.  I don’t know why it was so hard to find this info. You made it easier to find this info than the developer did.  Keep up the good work.

    James Reeves

    Reply

    1.  Hi amediaguy,
      Sorry for the delay in responding, it’s been a pretty hectic time.
      I use a mix of products.  Mostly I use Camtasia and select “produce for WEB”.

      I’ve had trouble with using Quicktime encoded videos if they use extensions specifically for MAC’s only…. the video just stays black.

      If you can give me some details on what you’re using and the settings, I’ll do my best to help.

      Reply

    1. Hi Elena,
      It really depends on what you’re using to convert the video. I’ve had issues with AVS, and some Quicktime encoded videos because of the encoding used.

      The link you provided is invalid. 

      If you can tell me how big the video is – the filesize – and what you’re using to encode the video, that will help.

      Cheers,
      Charly.

      Reply

  13. It seems so great to watch your tutorial but how can I do a playlist with Jw plugin. I am just new in designing a video blog and I hope that you can guide me more. I think that using Jw plugin is so easy but I don’t know how to do it well.

    Thank, Charly !

    Reply

  15. Hello Charly,
    I am new to adding video to WordPress.  A friend asked me to create a website where she can promote film festival shorts.  I decided to go with Amazon s3 , and the JWPlayer.  I followed your tutorials to a T…But, there are some issues…
    Since I have to transfer the films from a DVD, I use Handbrake.  I checked the recommended settings to do so.  Now, Handbrake creates a M4V…of the disc.  Is this the Format I should be using?  I transfered the M4V using Quicktime to get an MP4…but the quality on Playback is Horrible.  Is there a better way to transfer a disc to the format that works best with Amazon?  Also, I can see the Playback just fine, but others are getting Sound only with a Black screen.  I know I am doing something very wrong here.  So your help is much needed for a very ‘Green Gal’ in the States!  I am proud that I got this far though.
    Thanks,
    Bev Pelton
    California USA

    Reply

    1.  Hi Bev,

      M4V is the MAC version of a MP4. You could literally upload the M4V files and link to those.

      If you’ve run the M4V’s through Quicktime and some people are reporting a blackscreen, I’m going to assume the following:
      1. You’re using a MAC and have some QT plugins installed
      2. Those that are reporting problems are likely using a PC.

      I’ve had this problem a lot when I receive videos created from video production houses where they use HD plugins.  Being a PC user, I can’t use these files because they aren’t transportable.   Very, very frustrating.

      When you transferred from M4V to MP4 using Quicktime, did you use Export For Web? 

      When you say the playback is terrible, is that on your computer or after you upload it and display it on your site?

      If it’s after putting it on your site, you’ve likely uploaded a larger size video and trying to resize it in the player.  You are best served exporting the Video to the size you want to display on your site and trying that.

      HTH

      Reply

      1. Hi Charly,
        Thank you for your response.  I did not realize that M4V was the MAC version of MP4.  I have switched my procedure since my post.  So thank you for that!  Yes, the problem was PC people getting a Black Screen.

        If I may, I would start with explaining what I was told to do but is now having the effect of getting Video and Audio Playback on Safari, but The Black Screen with Sound Only on FireFox.  I still need to check on the sizing as you mentioned for the quality…but Not sure where I do that either.  I made my JW Player the custom size you recommended in your Video.  So I am doing something wrong there as well.

        ….This is what I have been doing….By first inserting the DVD into my Mac and loading into Handbrake.  I select Video_TS.BUP from the Video Folder.
        I now select in the Output Settings Box…MP4 file.  I then select the Web Optimized Box.
        The Video Codec reads H.264(x264 ( don’t know what that is, size?)  anyway, Frame Rate says, Same as Source…Video Quality : Constant Quality…

        I don’t touch any other settings.  Then I hit Start….And I get a MP4 on my desktop.  I then Upload to Amazon s3…(Following your wonderful instructional video)  I add the link dropping the https to http.
        The video plays on my Mac…But…at first is sits with 00.00 on counter, then the screen Blinks and the Video Starts…Another issue. But at least I am this far and a Novice at That. 
        Then I switch to FireFox….and get the Black screen with Sound Only.
        So..I am quite frustrated. 
        You are the only source I have found that knows what you are doing.  Really, don’t laugh…You are my HERO! 
        So any advise on this is greatly appreciated.

        Warmest Regards,
        Bev Pelton
        California

        Reply

  16. Hi Charly,
    Great info you have.

    Question,
    Can I make it so all my videos show up on 1 page, with thumbnail icon’s and be able to click on the thumbnail icons to play that particular video above?
    As it is, I have to make a new post for every video I want to share on my site.
    I’d rather have 1 page showing thumbnails and the user can pick and choose which 1 to watch?

    Thank you,
    Bill Anderson

    Reply

    1. Hi Bill,

      There are several ways to do this… 

      One way is to use the jwplayer shortcode and make the player smaller, like 250px by 150px (or whatever aspect ration works for the videos), through the style sheet you’ll be able to make it so those videos layout in a grid.  When you want to add a new video, you simply edit the page or post and add it in, rather than using separate posts.  Unfortunately, this will make the videos play in the smaller player AND if you’re trying to deploy content to different membership levels (if you run a membership site) it can be problematic.

      If you are using posts, you could “tag” the posts to indicate they have a video on them, and then use a theme template to create the grid layout.  This requires a bit of thought so you can retrieve the appropriate information, but we’ve used a similar approach of a few membership sites lately.

      With either of these approaches, you could also use a lightbox effect. Rather than embedding the video on the page, use the thumbnail image and a lightbox plugin – when the image is clicked, the video pops up (full size) in a hover box.  Much like we’ve done with the “watch our video demo” widget at the bottom of this site: http://organizeyourlife.com.au/

      This takes a bit of work to accomplish, because you have to include the right lightbox Java code etc.  I’ve also found that most light box plugins that work with JW Player fall back to Flash mode, which renders the functionality useless on IOS devices.  We created a function for another membership site recently, that embeds videos in a grid format, and uses Shdowbox JS (http://www.shadowbox-js.com/) to do the hoverboxes.  We detect if an IOS device is used and embeds the html code.  We created the function in the category templates AND deployed a shortcode so the function could be used within specific pages or posts.

      In summary, do it manually on a page or a post. Or use your category templates to create the effect you’re looking.  I’m positive there’s other ways too, but these are the two ways we tend to do it.

      Charly.

      Reply

  17. Just FYI, all your videos on this page no longer work properly. I’m getting “Video not found or access denied” messages every time I click “Play”.

    Reply

    1. Hi Steve, Thanks for the heads up.  I’ve just checked everything and it seems to be o.k.  Can you let me know if you are still having problems?  Maybe try forcing a browser refresh and see if it clears up?

      Reply

      1. They work today. In both FF13 and Safari 5.1.7 on my Mac. They didn’t work in either browser yesterday… Weird…

        Steve

        Reply

  18. Thank you so much. Really clear, understandable and nice voice. Without you?I wouldn’t be ab?e to do that.?I hope you continue your great work!:)))))

    Reply

  19. I also have a question:
    1. After the video is embedded, is it possible to replace the videos without repeating the whole process? On this homepage I just change the number of each video without doing anything.
    2. Is it possible to change the skin or colors of the player after it is embedded? What if I want to design each video differently for each page? Can I use several designs?

    Reply

    1. Hi, you can always use the JW Player shortcode with the direct link to your video – you don’t need to use the External Media process. Then you can copy and paste the shortcode, or just edit the link.

      Under the SETTINGS tab for JW Player in wp-admin, you can change your colours etc. You can several different players and use them in different posts depending on what you want to do. I do this when I need to have videos display in different sizes.

      Reply

  22. Charly… some of the videos I post via youtube say that the embedding is restricted because of youtube… have you found any solutions from this?

    Reply
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}