Using JW Player, WordPress, Amazon S3 & Youtube

Using JW Player, WordPress, Amazon S3 & Youtube

Posted on 26. Jun, 2011 by in JW Player, Members Only

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

Using JW Player to Display a video hosted on Amazon S3

Displaying a Youtube Video With JW Player

Tags: , ,

   Clip to Evernote   Subscribe to It!

Charly Leetham is a Small Business Coach and Online Business Implementation Expert and I help small businesses take their business online. I provide services to solopreneurs and small business who wish to sell or promote their products and services online.
Online Business Implementation Expert

  • http://www.the-music-ministry-coach.com Ron

    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

    • http://askcharlyleetham.com Charly Leetham

      Hi Ron,
      Thanks for the heads up, I just tested the last two videos in two different browsers and they play as expected – would you mind checking again?

  • Michael

    Hi Charley,

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

    Michael

    • http://askcharlyleetham.com Charly Leetham

      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.

  • Eric

    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.

    • http://askcharlyleetham.com Charly Leetham

      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.

      • Eric

        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

  • Thomas Colvin

    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.

    • http://askcharlyleetham.com Charly Leetham

      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

    • http://askcharlyleetham.com Charly Leetham

      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.

  • Jimmi

    Hi Charly, Thanks for the videos. Very clear and easy to understand.

  • Slavica

    Hello Charly,
    thank you for the great videos.
    Keep up the great work.

  • http://twitter.com/9mmtylenol Jesse Watson

    GREAT VIDEO, I was looking forever to find the JW Player’s “insert into post” button. Sometimes you need a little nudge in the right direction. =D

    • http://askcharlyleetham.com Charly Leetham

      Hi Jesse – glad it helped.  I know exactly waht you mean by the nudge in the right direction.

  • Loretta

    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

    • http://askcharlyleetham.com Charly Leetham

      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!

      • Loretta

        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

        • Niiki

          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!

        • http://signlanguageresource.com/ Isaac

          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.

  • James Reeves

    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

  • Anonymous

    Charly, what do you use to encode your mp4 for use with JWPlayer. The player will only play sound and it stays black

    • http://askcharlyleetham.com Charly Leetham

       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.

    • http://www.facebook.com/keala.kanae Keala Kanae

      If you’re trying to convert to MP4, you can upload to youtube and then download it as an MP4. Let YouTube do the hard work.

  • Elena

    Hi, Charly! Thanks for your help and nice tools!!! But my video in a jwplayer is black loading for 1 hours and still nothing. What can be an a problem? I m using PC–Can you explaine what to do..
    Here is the link https://s3.amazonaws.com/turboton/Svetlana.mp4
    B.r Elena

    • http://askcharlyleetham.com Charly Leetham

      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.

  • http://www.facebook.com/keala.kanae Keala Kanae

    This has been extremely helpful. Thank you, Charly.

  • Ratanak

    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 !

  • Hoangthachit

    i can’t do nothing ? please help…
    http://phim.vinagiaitri.net

  • Bdpelton

    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

    • http://askcharlyleetham.com Charly Leetham

       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

      • Bdpelton

        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

QR Code Business Card