{"id":18180,"date":"2012-09-11T07:15:04","date_gmt":"2012-09-11T14:15:04","guid":{"rendered":"http:\/\/css-tricks.com\/?p=18180"},"modified":"2012-09-11T09:44:46","modified_gmt":"2012-09-11T16:44:46","slug":"video-source-by-screen-size","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/video-source-by-screen-size\/","title":{"rendered":"Video Source by Screen Size"},"content":{"rendered":"

Right after The Lodge<\/a> 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.<\/p>\n

<\/p>\n

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

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.<\/p>\n

For the record, I’m also doing:<\/p>\n

AddType video\/mp4 mp4\r\nAddType video\/ogg ogv\r\nAddType video\/webm webm<\/code><\/pre>\n
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.<\/p>\n
In some quick testing, the videos played on the iPad too, yay! <\/p>\n
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<\/a> 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. <\/p>\n
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.<\/p>\n
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?<\/p>\n
I just recently learned<\/a> that you can use media attributes on the video element, like:<\/p>\n
<video controls> \r\n   <source src=\"video-small.mp4\" type=\"video\/mp4\" media=\"all and (max-width: 480px)\"> \r\n   <source src=\"video-small.webm\" type=\"video\/webm\" media=\"all and (max-width: 480px)\"> \r\n   <source src=\"video.mp4\" type=\"video\/mp4\"> \r\n   <source src=\"video.webm\" type=\"video\/webm\"> \r\n<\/video><\/code><\/pre>\n
(Really makes the <picture><\/code> element make sense, eh?)<\/small><\/p>\n
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<\/a>.<\/p>\n
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:<\/p>\n
var mainVideo = $('#the-video');\r\n\r\nif ($(window).width() < 1200 && medQualVersion) {\r\n  mainVideo.append(\"<source type='video\/mp4' src='\" + medQualVersionSrc + \"' \/>\");\r\n} else {\r\n  mainVideo.append(\"<source type='video\/mp4' src='\" + highQualVersionSrc + \"' \/>\");\r\n}\r\nmainVideo.append(\"<source type='video\/webm' src='\" + webMSrc + \"' \/>\");\r\n\r\n\/\/ Wait until sources are appended to call MediaElements.js\r\nmainVideo.mediaelementplayer();<\/code><\/pre>\n
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.<\/p>\n
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. <\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":306781,"url":"https:\/\/css-tricks.com\/im-getting-back-to-making-videos\/","url_meta":{"origin":18180,"position":0},"title":"I’m getting back to making videos","date":"May 7, 2020","format":false,"excerpt":"It's probably one part coronavirus, one part new-fancy-video setup, and one part \"hey this is good for CodePen too,\" but I've been doing more videos lately. It's nice to be back in the swing of that for a minute. There's something fun about coming back to an old familiar workflow.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/chris-iphone.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266407,"url":"https:\/\/css-tricks.com\/screen-recording-utilities-for-macos\/","url_meta":{"origin":18180,"position":1},"title":"Screen Recording Utilities for macOS","date":"March 8, 2018","format":false,"excerpt":"I record quite a few short little videos. Sometimes for use demonstrating bugs or weirdnesses. Sometimes right here for the blog. A lot of times for Instagram or other social media. Allow me to get SUPER NITPICKY about what I like. Multiple formats. Sometimes you need a GIF. Sometimes you\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/screen-recording-macos.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":18998,"url":"https:\/\/css-tricks.com\/web-developer-economics-one-off-software-costs\/","url_meta":{"origin":18180,"position":2},"title":"Web Developer Economics: One Off Software Costs","date":"October 26, 2012","format":false,"excerpt":"We kicked this little series off talking about monthly service costs, then started a poll about earnings, now let's keep it going and talk about software again. This time, software that you only buy once. Maybe it has paid upgrades once in a while, but those are optional (e.g. Adobe\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":179442,"url":"https:\/\/css-tricks.com\/favicon-quiz\/","url_meta":{"origin":18180,"position":3},"title":"Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?","date":"August 18, 2014","format":false,"excerpt":"The following is a guest post by Philippe Bernard. Philippe has done research on what it takes to make a favicon (and all the related graphics and markup) such that you are covered with the best quality output everywhere. Spoiler alert: it's a lot of different graphics and markup. Also\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/favicons.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302546,"url":"https:\/\/css-tricks.com\/uses-this\/","url_meta":{"origin":18180,"position":4},"title":"Uses This","date":"January 30, 2020","format":false,"excerpt":"A little interview with me over on Uses This. I'll skip the intro since you know who I am, but I'll republish the rest here. What hardware do you use? I'm a fairly clich\u00e9 Mac guy. After my first\u00a0Commodore 64\u00a0(and then\u00a0128), the only computers I've ever had have been from\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/chris-uses-this.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":277308,"url":"https:\/\/css-tricks.com\/quick-tip-debug-ios-safari-on-a-true-local-emulator-or-your-actual-iphone-ipad\/","url_meta":{"origin":18180,"position":5},"title":"Quick Tip: Debug iOS Safari on a true local emulator (or your actual iPhone\/iPad)","date":"October 11, 2018","format":false,"excerpt":"We've been able to do this for years, largely for free (ignoring the costs of the computer and devices), but I'm not sure as many people know about it as they should. TL;DR: XCode comes with a \"Simulator\" program you can pop open to test in virtual iOS devices. If\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/debuggingsafari1665x705.png?fit=1200%2C508&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/18180"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=18180"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/18180\/revisions"}],"predecessor-version":[{"id":18191,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/18180\/revisions\/18191"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=18180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=18180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=18180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}