HLS: HTTP adaptive bit rate and iOS streaming video



[vc_col_top_icon title=”Apple Dev’s best practices for iOS video encoding screen resolutions” icon=”mobile” url_target=”_self” title_color=”#919191″ title_hovercolor=”#a0c4f1″ icon_color=”#ffffff” icon_bgcolor=”#000000″ url_value=”http://gravlab.com/iphone.html”]


Table 1 H.264: Quick and dirty guidelines for encoding H.264
Use Scenario Resolution & Frame Rate Example Data Rates
Mobile Content 176×144, 10-15 fps 50-60 Kbps … 3G, CDMA
Internet/Standard Definition 640×480, 24 fps 1-2 Mbps
High Definition 1280×720, 24p 5-6 Mbps
Full High Definition 1920×1080, 24p 7-8 Mbps

[/vc_col_top_icon][vc_cta_button call_text=”Want your encoding handled & done?” title=”Get started today” target=”_self” color=”btn_black” icon=”none” size=”btn-large” position=”cta_align_right” href=”http://gravlab.com/plans.html”]


iPad Resolutions and <metaviewport>

Quick break down with some caveats



The pixel width and height of your page will depend on orientation as well as the meta viewport tag, if specified. Here are the results of running jquery’s $(window).width() and $(window).height() on iPad 1 browser.

When page has no meta viewport tag:
  • Portrait: 980×1208
  • Landscape: 980×661
When web page has either of these two meta tags:

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">

  • Portrait: 768×946
  • Landscape: 1024×690
With <meta name="viewport" content="width=device-width">:
  • Portrait: 768×946
  • Landscape: 768×518
With <meta name="viewport" content="height=device-height">:
  • Portrait: 980×1024
  • Landscape: 980×1024
With <meta name="viewport" content="height=device-height,width=device-width">:
  • Portrait: 768×1024
  • Landscape: 768×1024
With <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">
  • Portrait: 768×1024
  • Landscape: 1024×1024
With <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">
  • Portrait: 831×1024
  • Landscape: 1520×1024


[vc_blockquote type=”type1″ border_color=”#000000″ border_size=”1″]

If you can, try and minimize the amount of zooming the user needs to do to click buttons and text areas.

Make the width and height the same as the lower resolution of the iPad, since you don’t know which way it’s oriented.





Encoding video for every screen out there is a hard moving target to hit. Knowing the precise settings for video transcoding takes trial and error, patience and a lot of computer processor cycles thrown at the task.



  1. Upload your source. Our ffmpeg cloud encodes almost any source format you have. Our codecs have been optimized for achieving the best quality of video and optimizing bandwidth. We have years of experience deploying efficient HTTP Live Streaming for iOS devices to your project.
  2. Wait about 2 minutes per minute of  the source video you uploaded. We do all of the heavy lifting to support advanced video delivery to Apple mobile devices. You embed any of our many html5 players into your website, or keep it on your page and use an iframe (like youtube or vimeo, only a better network). Your audience is routed via the shortest hop to our 27 POPs. Your video is streamed from our worldwide streaming video CDN.
  3. Copy and paste your embed code into your site. Your player is on your site, but your video is being streamed from our global network.



 [vc_blockquote type=”type1″ border_color=”#000000″ border_size=”4″]

We help you reach everyone, world-wide on iOS with optimized encoding that is delivered from the edge on a CDN that was build for video.


What is HLS? Adaptive Bit Rate Streaming?

Designed into iPhone OS 3.0 on up to 7.0 and beyond, the built-in video player now supports adaptive bit rate switching during playback. As a user watches a video, the iPhone player will detect the user’s available bandwidth and automatically adjust to the appropriate bit rate during playback. This process is a much better viewing experience: higher quality (bit rate) videos are streamed for faster WiFi connections while lesser quality videos are streamed in low bandwidth situations such as is the case with AT&Ts 3G network. We can even encode your video so that it fails over to an audio only stream with images for weak cellular signals if necessary.


Apple calls their streaming technology ‘HTTP Live Streaming’. The ‘Live’ part of the name can be confusing. It’s iOS streaming video – on demand or live streaming. To take advantage of this, you need to create a set of files including a master .m3u8 streaming instruction file, a .m3u8 file for each bitrate you have specified, and all the video segments (MPEG .ts) in the duration specified.

GravityLab does all the encoding work for you, automatically.

For more information about Apple’s HTTP Live Streaming encoding services at GravityLab, take a look at our iOS video hosting plans.





[vc_separator separator_type=”thick_solid”]

What you need to know about HTTP Streaming