Grow your CSS skills. Land your dream job.

Video Source by Screen Size

Published by Chris Coyier

Right after The Lodge opened up around here, I started getting reports right away about some videos not playing on the iPad. Ugh, crap, these are paying customers and they should be able to watch these things on a modern device.

I'm literally using HTML5 <video> to display the videos and hosting them on Amazon S3 (so they can be protected). I have been exporting them from Screenflow at as high of quality as I possibly could, giving me H.264 .mov files.

Apparently that's not great for iPad, it's better to be in .mp4 format. From a Mac, you an export from Quicktime (and thus Screenflow) as .mp4, but only in preset settings like "iPhone" or "iPad" or "Apple TV". That's fine I thought, I'll just choose "iPad". The quality was good and they continued to work on desktop WebKit browsers through HTML5 video.

For the record, I'm also doing:

AddType video/mp4 mp4
AddType video/ogg ogv
AddType video/webm webm

from my root .htaccess file so that video gets served as the correct content type. Although I'm not sure exactly how much that helps since the videos are on S3.

In some quick testing, the videos played on the iPad too, yay!

But then reports kept rolling in of people trying to watch certain videos on the iPad and it failing. The exact behavior was the spinner just spinning and spinning and spinning. I'm actually using MediaElements.js here (there is no spinner on native UI's that I know of) but the root of playing the video is still just native HTML5 video (in supported browsers). I'm just using MediaElements.js as a nicer skin for the player.

I verified it. Some videos would play and some wouldn't. The only thing I could figure out was file size. I have one that was 75MB that would play and one that was 99MB that would not play. Strange but true.

So, I went back and re-exported all the videos I have posted so far in "iPod" .mp4 format, which is a bit smaller resolution thus smaller file sizes. But I didn't want to penalize everybody with lower quality video. What to do?

I just recently learned that you can use media attributes on the video element, like:

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

(Really makes the <picture> element make sense, eh?)

This is awesome, and apparently supported by Chrome and Safari. But sadly, not the iPad (I tested it.) It's also at risk of being removed.

I needed something that is going to work right now, so I decided to just inject sources dynamically into the video. First I test the screen width to see if it's a fairly small screen (testing for 1200px here, the iPad reports 1024px). Using jQuery, and assuming I have some variables set with URL's to video sources:

var mainVideo = $('#the-video');

if ($(window).width() < 1200 && medQualVersion) {
  mainVideo.append("<source type='video/mp4' src='" + medQualVersionSrc + "' />");
} else {
  mainVideo.append("<source type='video/mp4' src='" + highQualVersionSrc + "' />");
}
mainVideo.append("<source type='video/webm' src='" + webMSrc + "' />");

// Wait until sources are appended to call MediaElements.js
mainVideo.mediaelementplayer();

I don't absolutely love this. For one, I wish the original high quality files would just work. For two, just because someone is on an iPad doesn't mean they want lower quality. They probably don't. But it's the only thing I could get to work right now.

I don't know if this is a ubiquitous problem for everyone or if it's something specific to all the various tech I'm using, but I thought I'd document it.

Comments

  1. arsalan
    Permalink to comment#

    good post about video i ll use it !

  2. Could it be that your problem had to do with the order of the <source> tag? I believe for iPad, you need to put the MP4 video first of all always.

    Look at line 45 of the source code of this page:

    http://camendesign.com/code/video_for_everybody/test.html

    It’s my go-to page for <video> code

  3. HTML5 video portability is still a very difficult matter. After many tests I gave up. There are encoding issues, format issues, device issues, filesize issues, ….

    The best way to deliver a good video experience to everybody without loosing your sanity is to use a third party service like YouTube or Vimeo. They re-encode your video for multiple configurations and ensure total portability.

    • Permalink to comment#

      Agree! All the public videos here on CSS-Tricks are YouTube which does an outstanding job with that. I just needed this to be an in-house job to control access.

    • Vimeo has a lot of features to host private videos with access control.

      We use Vimeo here for a paid online training product. Works perfectly.

  4. Permalink to comment#

    I think the file size problem could simply be related to the way you distribute your movies. Since they are hosted from S3 directly, I don’t think the video is being streamed/buffered properly.

    Cloudfront would be your friend with this, you can still secure your content as well apparently using private files:

    http://docs.amazonwebservices.com/AmazonCloudFront/latest/DeveloperGuide/PrivateContent.html

  5. rnovino
    Permalink to comment#

    for my personal opinion you just have to tweak on your video conversion basically like lynda.com their videos are clear even though they are on a very small file size maybe you can also use http://www.sorensonmedia.com/video-encoding/ or even handbrake will help on your conversion :D , because for my personal preference I’d rather watch low quality video rather than a high quality video but not loading at all even though I paid for it

  6. Josh
    Permalink to comment#

    Have you eliminated S3 as the culprit? Upload one of the persnickety videos to the CSS-Tricks server and try playing it back from there.

  7. Austin Brian
    Permalink to comment#

    I use free JWPlayer, http://www.longtailvideo.com/players which uses Javascript to do flash detection. If Flash is present, the video is shown using a FLash player, but if Flash is not present, it delivers an HTML5 player. I use a single source file (.mov file H.264 with AAC) iPhone, iPad and Flash can both play a .mov videoencoded w/H.264 and ACC, so the one source file works for desktops plus iPad. And, if you want to support other mobile devices w/ no Flash and no .mov support, you can specify the alternate video formats (ogg, webm)

  8. Jean Strong
    Permalink to comment#

    I have this same problem but on the iPhone. Did you have the same difficulty – if it didn’t play on the iPad it also did not play on the iPhone?

  9. Darfuria
    Permalink to comment#

    Whilst I get you’re using Amazon S3 to protect the files, wouldn’t it be easier (and cheaper!?) to use a third party video hosting service who have an API allowing you to restrict access to the videos unless they’re accessed via The Lodge?

    I’m sure Vimeo and Viddleroffer something like this – and no doubt there are many others -and I imagine their players work just fine on iOS devices.

  10. Blair
    Permalink to comment#

    If a private Vimeo channel doesn’t work, look into keyframe-aligned mp4s and SMIL files using Squeeze or even Apple Compressor. I use JW to make things easier. The SMIL is a small xml file defining locations to multiple file sizes (specifically bitrate and width) and iOS will decide which to use based on bandwidth and screen size. Part of the HTML5 stuff. Better than javascript. Squeeze or Telestream Episode will do the whole thing for you.

  11. Blair
    Permalink to comment#

    Should also note that you’re using progressive downloading and not HLS, which does watch bandwidth and screen size. As someone mentioned earlier, you’re not actually ‘streaming’ but probably should be….

  12. Bobby Jones
    Permalink to comment#

    Have you considered using the sublime video player (http://sublimevideo.net/), it is compatible with amazon s3 and claims to work on all mobile devices using HTML5

  13. Permalink to comment#

    If you’re hosting on S3, look into using CloudFront (super easy to setup), you can set it up to stream videos over the RTMP protocol, which, when combined with CloudFront’s CDN makes serving/streaming videos super quick.

  14. Filip Bech-Larsen
    Permalink to comment#

    The deal might be that you header information is at the end of the file – that makes some players (the iPad and more) wait for it to download before it plays.
    In order to fix this in most export menues that use the build in export (on a mac) you select an option (usually a checkbox) that says some thing among the lines of “enable streaming” or something.
    You could run the file through ffmpeg (a command line tool for video encoding – used by handbrake and others) and add a plugin thats called QT faststart – that does exactly the same for you. (try googling qt-faststart for more info).
    You could (maybe you should) also have a video workflow setup where you upload a file from screenflow and ffmpeg converts it into multiple files with different resolutions and bitrates.

  15. I was making a site devoted to html5 video a while back and I will look for the code I settled on. It was a bumpy road but I got it working on everything. (pretty sure it had to do with the order you placed the sources but I am guessing until I see the code.)

  16. suprsidr
    Permalink to comment#

    I did a extensive review of html5 video http://testr.suprsidr.com/v/video/
    iDevices need byte range support
    Or the very least low profile encoding.

  17. @Yoostin
    Permalink to comment#

    As mentioned above it could be that the video isn’t wrapped for fast start, the metadata atom is at the end rather than beginning of the file. It’s only an outside chance though since most of the videos play ok and would presumably have been encoded and wrapped with the same settings as those that won’t play.

    A quick way to check & eliminate that might be to run the offending videos through zencoder using one of their device profiles as a template. Five cents per minute of output is worth it to avoid the head scratching and double, double checking your own encoding.

    Now that I mention profiles it’s worth noting the original iPad likes h.264 “main” profile, iPad2 will play “high” profile h.264. That could also explain why some users on iPad have a problem with some videos.

    Good luck.

  18. Liz
    Permalink to comment#

    Hey guys,
    I signed into the lodge but see no “lodge” videos or outline, etc.
    If I click on videos the site goes back to the regular CSS-tricks home page.
    Is it too early for the web design makeover videos?
    Thanks Liz

    • Permalink to comment#

      Hey Liz,

      I tried to email you back when you emailed in but the email bounced… Looks like it was a mis-spelling and I’ll try to email back again now. I’m going to bury this comment as it’s not directly about this content.

  19. Permalink to comment#

    If you send me a couple of links to not working videos on s3 I might just be able to help you. At my company we have to deal with that all the time… and I owe you for writing this awesome blog ;-)

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".