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.
good post about video i ll use it !
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
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.
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.
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
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
We went with Vimeo Pro for Kicktastic because you can limit the embeds to specfic domains, and it gets around their whole commercial thing. You should check it out and see if it makes sense. It was way cheaper than all the other options and obviously the player is pretty rock solid.
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.
I haven’t totally eliminated it… I might just go for Jonathan’s suggestion above =)
How are you uploading the videos to s3?
Its always a good idea to add a MIME content-type header to the file as what you have in your htaccess file won’t do anything.
I use the s3fox extension for firefox to upload the videos as that lets you set the content-type when uploading
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)
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?
I’ve done more than my fair share of video encoding, and the symptom you are experiencing (spinner just spinning) sounds like the video is working fine, but isn’t encoded for streaming.
When encoding to MP4 (which BTW, is absolutely the file format that should be used for streaming videos, along with h.264 as the codec as there is hardware decoding for that built-in to many mobile devices), there’s a ton of options available, but most of them are hidden when using basic encoding software. I am not familiar with Screenflow’s encoding settings, but I am familiar with Quicktime’s, and I know that it can have issues with this every now and then, and actually isn’t very good.
For all video encoding, I use Sorenson Squeeze (which is probably a bit of overkill for you), which does a great job and has never given me an issue.
Basically what I think the issue comes down to is this: The videos are not setup to “streaming”; meaning to play as they download. What might be happening is the video just loads and loads and loads, waiting for the file to complete download before playing, which would make it appear that the video is never going to load at all. H.264 (and by extension MP4).
OR you could go the truly easy route: Upload the video to YouTube or Vimeo (as a private video, so no one can see it), wait for it to be processed at 720 HD, and then download that file (you can use KeepVid or Offliberty for that; both free services). Now you have a file that is most likely guaranteed to work on most (if not all) devices, and you can use that instead of the export from Screenflow/Quicktime.
But if the issue really is with the HTML and/or Javascript, then my suggestion won’t help much. It’s worth a shot though, and you will get better quality than iPod export.
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.
“This is awesome, and apparently supported by Chrome and Safari. But sadly, not the iPad (I tested it.)”
(Also supported by Opera on desktop and Opera Mobile, FWIW – full disclosure, I work for Opera)
Actually, this should work just fine in Safari on the iPad. See for instance http://people.opera.com/patrickl/experiments/video/mediaquery/
Is it maybe because you’re not using width=device-width viewport?
I am using that meta tag and I swear it didn’t work on my iPad 2 with latest software updates. There may have been other things at work here, as this comment thread suggests (e.g. not encoded for streaming? Amazon not serving correct content type?)
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.
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….
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
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.
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.
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.)
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.
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.
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
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.
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 ;-)