Getting iPhone HD Video Online

I recently upgraded my iPhone to the 4S model, where Apple has upgraded the camera chip and lens design for improved photography including; being able to capture HD 1080p video. This post attempts to cover the process of getting the iPhone’s new HD 1080p video to a WordPress site. Related to this topic, I wrote a similar post called Getting Good Video with Vimeo.

Getting video online and into WordPress is more involved than moving iPhone images to a WordPress site. Firstly, you should realize that source video content should not be uploaded directly to your WordPress Media Library. Video content is data heavy and especially with HD quality video, you need a streaming video server, a standard Apache server with a WordPress installation can’t serve that much video data to your viewers. The server limitation is addressed by setting up a video stream service from You Tube or Vimeo. The solution is to embed the video’s URL into your WordPress post and a video player will pull optimized video content from the streaming server. Optimized video can have many parameters, compressed MP4 video would be a video format that allows for compression and is optimized to stream efficiently from a steaming server. You Tube or Vimeo will provide video streaming for free, but if you plan on providing HD quality video to your viewers, then you will need to upgrade to a paid streaming account. I purchased a Vimeo Plus account for $60 a year. With the Plus upgrade, Vimeo provides me with better video rendering and the capability to upload 1080p source video. Without a Plus account, Vimeo limits free-accounts to only limited HD 720p uploads. Don’t mess with the a free account if your goal is HD content on your site. All the quality HD content I have viewed on Vimeo have been contributed by authors with “Plus” status.

iMovie’s video cam import options

Getting your iPhone video clips to your video editing application, in my case; iMovie, requires connecting your iPhone with a USB cable, and importing the clips with the video cam import button. There is also a wireless method of sending an iMessage to yourself with the desired video clip attached. Note: iCloud syncs only photos, not video, so iCloud is not an importing option to your Mac. Importing a lot of video into iMovie can be time consuming because iMovie must first generate thumbnail images of the imported video. I use the QuickTime player to do an initial edit of the poor clips, importing only video with potential into iMovie.

Uploading your finalized project within iMovie to Vimeo is easy just select Vimeo from the  Sharing Menu. Generally, you want to upload the best source video to Vimeo that you have, so click the  HD 720p or HD 1080p format. Then, from your Vimeo Plus account, you should review and select all your video settings to create your custom defaults. Take the time and create a preset theme for your video player, this will keep all instances of the video player looking and operating consistently within your WordPress site. Vimeo Plus users have additional video settings that basic accounts do not have, including; which domains can show your videos, as well as, hiding them from the site. Many additional HD options with Vimeo are covered on their FAQ page.

The last step in getting your video online and into your WordPress post is the embedding step. I have not found a good WordPress plugin for importing Vimeo content yet, so you need to copy the necessary code snippet into your post editor in HTML mode. There are three ways to do this:

  1. Paste the Vimeo URL into your post.
  2. Use the Vimeo shortcode and an associated WordPress plugin.
  3. Copy and paste the Vimeo iframe embed code into your post editor.
Universal embed player on iPhone WordPress post

Don’t use the first two, because they may not include the universal embed code and they may fail to scale your videos properly in mobile devices and tablet devices like an iPad. It will also ensure that the proper size and format (Flash vs. HTML5) is streamed to your device, letting Vimeo deal with the various sizes, devices, and formats required on the Internet. The iframe embedding HTML code is found in the embedding panel (Get Embed Code link) of your video’s settings when logged into your account. You can reuse this code snippet for future video posts replacing the Vimeo id number and adjusting the width and height if desired.

OK, now the reality check from Vimeo:

“Note while 1080p is higher resolution, please be aware that it can take significant resources on your viewers’ computer and may cause choppy playback.”

You’ve got this awesome HD 1080 video content online but your viewers may not have the internet bandwidth, computer horsepower, or monitor resolution to see the video’s HD quality. HD 1080p video has twice as much data as HD 720p video. From my tests, it is very difficult to see the difference in quality between 720p and 1080p, unless your viewers enlarge your video to full screen mode and my guess is that most viewers don’t know about this option unless they are specifically reminded to view in full screen mode. It may make sense to provide just HD 720 video to your audience unless they are from South Korea and can pull down 50MB/sec. On the flip side, 1080p seems to be a standard resolution for many large screen electronics, so you might want to get your video content ready for the future.

[responsive_vimeo 36972963]

Getting good video with Vimeo

Like many amateur videographers, I was not satisfied with You Tube’s video quality with my uploaded video clips. My videos were always too compressed and You Tube did not offer enough control over my finally video presentation, so I tried Vimeo which offers basically the same video services. This post covers my experience with Vimeo and what I learned about getting good web video with Vimeo.

First off, a standard free Vimeo account is much like You Tube’s service; not good enough. Grainy web videos are not up-to-par with the high quality HD videos that can be found on the Internet nowadays. Only after I upgraded to a Vimeo Plus account did I finally get video quality that I considered acceptable. Vimeo Plus cost $60 a year, which is pretty reasonable for nearly unlimited streaming video. That’s $5 per month to have a streaming video server, HD quality resolution, for an unlimited number of videos. If you don’t have a Plus account, you are going to be a second class client with Vimeo. A basic free account has restrictions and limitations that push you to a Plus account and this is how Vimeo makes money.

When you sign up with Vimeo you are creating your video library on Vimeo’s streaming server. From Vimeo’s website you can manage your videos within your account. Video from Plus accounts is always “processed” ahead of free accounts and there are no limitations on how many videos or how large your videos can be when uploaded to their servers. A basic Vimeo account can’t upload enough video data (size: h x w) to get good video quality. As a Vimeo Plus user, your account has many more options which you can select during the production of your web video. The Embedding settings will allow you to customize your video player and eliminate ads within your player. Privacy settings allow to control who can watch your video content including it being only viewed from your domain.

I have a website hosted on a web server, but the server is not a streaming video server. A streaming video server is absolutely necessary to deliver video content to your website. Keep in mind that your videos are stored on Vimeo servers, not on your web server. They are displayed on your website by embedding a video link from your website to Vimeo’s servers. This is good because serving videos from your server will eat-up your website’s bandwidth quota quickly. Web host admins, like myself, want our clients to keep their video content on streaming servers not on a web server. A video server has been optimized to stream your video content much more efficiently than a standard web server. If you don’t have a website, you can still share your videos with others by viewing them from Vimeo’s site.

What really helped get my videos looking better was when I uploaded so called HD videos to Vimeo with minimal video compression. Let Vimeo do the prepping and compression of your videos. Vimeo recommends uploads with the H.264 codec, size of 1280×720, and a bit rate of 3000-5000 kbits/sec when exported from your video editor application. In iMovie’s Share menu you will find Vimeo’s export panel. Enter your Vimeo account login and size to publish. HD 720p produces good results for all devices with less download bandwidth. If you use HD 1080p, your movie will double in size, but would be good for presentation on a 27″ monitor.

Video resolutions of 1280×720 or greater are considered high definition and with a Plus Vimeo account, your uploaded source video is processed more thoroughly by Vimeo, resulting in superior video compression and containing far less pixel artifacts (blur spots). If your video meets Vimeo’s specs for HD quality, you will see the HD logo at the bottom of your movie player control buttons. You should see clearer video when compared to non-HD video. Event though, you are providing your viewers with HD video, you should probably not have the embed settings to default to HD (HD is off) because many browsers don’t have the bandwidth and will experience sluggish playback. Don’t check; “Default this video to HD quality when embedded”. If they want HD, they click the HD icon on the video controller (HD is on).

HD/Non-HD difference: The extra video compression can be seen on the right around the text.

Here is an example of using Vimeo Plus correctly with HD content. Granted; good photography, Nikon cameras, and a helicopter help too.


[responsive_vimeo 34666308]

There is also a free iOS application available from Vimeo. Once you login into your Vimeo account from the Vimeo app, you can produce and distribute video content from one application on an iPhone. As crazy as editing video on a mobile phone sounds, in a pinch, you can trim your clips, add text, add audio and get them online quickly.

Video editor in  the Vimeo app

 Another issue with serving video content on the Internet is who are you serving your videos to? What size of video do mobile browsers need and what formats do they require? Vimeo’s post-production takes care of these unknowns for you. Vimeo will create mobile versions of your video for you. In the example to the right, Flash video is not supported by iOS devices, so Vimeo provides a H264 encoded version to the iPhone. With Vimeo, you don’t have to worry about optimizing your video for web viewing or different mobile devices, just get them enough data, and they do the optimizing.