How many encoding formats does HTML5 require in IOS development?

IOS developmentMediumHTML5How manyEncodingThe format is the content to be introduced in this article.HTML5What exactly is required?EncodingThe format can be supported. Let's look at the details.

HTML5The <video> tag of is really mighty. Almost all mainstream browsers can directly provide local video playback functions, which is much more advanced than the previous playback method similar to "relay" through Flash. It also brings hope to some mobile devices that do not support Flash playback.

You may be confused about the types of videos that the <video> tag supports. Well, how many encoding formats do I need to convert to implement HTML5? WebM, Ogg or MP4? That... What encoding formats does iPhone and Android need? What if I want to provide videos with high, medium, and low bit rates?

Next, let's take a look at the details of the HTML5 <video> tag.

About Web format

Currently, there are three video encoding formats widely supported by browsers, but none of them can reach the realm of all browsers. Therefore, the same video must be in at least two formats before it can be played in all browsers.

Select the most supported video format, which is MP4 + H.264, and AAC or MP3 for audio. MP4 encapsulated videos can be played in Safari, Chrome, and IE9. However, IE9 only supports Windows Vsita and Windows 7 ). At the same time, this combination is also the best choice for player playback through Flash. It can also be played on many handheld devices, for example, iOS, Android, Blackberry, PSP, and PS3. During H.264 encoding, you can select "High Profile" for the best encoding quality or "Baseline" for some mobile devices.

In addition, there are two combinations, WebM + VP8 and Ogg + Theora + Vorbis, to meet other browsers. WebM can be played in Firefox4.0 +), Chrome6.0 +) and Opera10.60 +); Ogg can be played in Firefox3.5 +), Chrome3.0 +) and Opera10.54 +.

Then the question comes again. If you want to choose one, is it Ogg or WebM?

From the perspective of Zencoder, WebM must be the leader in open video formats in the future. VP8 is better than Theora, and it also has a powerful community as its backing, especially Google's support.

In turn, looking at Ogg, the biggest feature is that she supports 44.64% of browsers. Note: this should be the proportion of the browser segment rate that can be played ), webM only supports 9.35% browsers. If you only focus on October 2010, Ogg is also a good choice. For the next 1-2 years, WebM seems to be more advantageous.

Recommended: One of MP4 + WebM or Ogg, of course, all of them can be encoded ^.

About mobile devices

Like a browser, there is no full encoding solution on a mobile device. Different mobile devices have different coding standards, which are even more complex than browsers. However, there are still some solutions that can save you a lot of energy.

Here you can view a complete mobile device encoding list.

1. Currently, most mobile devices support MP4/H.264. Including iOS products such as iPhone, iPod, iPad, and Apple TV), the vast majority of Android devices, and new Blackberry phones. For such devices, select "Baseline" for encoding ". In terms of resolution, for iOS and Android devices, select a resolution not higher than 640 × 480. For Blackberry phones, select a resolution not higher than 480 × 360.

Note: This encoding format can be played on the iPhone, or in HTML5, of course, only a part of browsers) or Flash. If you are afraid of trouble or want to save some time for conversion, you can consider the encoding, not higher than the resolution of iOS and Android devices. If you are not in trouble, and the video performance varies greatly in different bit rates, or you need to make it clearer on the computer, encode several different bit rates.

2. For some old mobile devices, select 3GP/MPEG4. Most Blackberry phones and some Android phones support this format. At the same time, 3GP can be played on iPhone and iPod.

3. About WebM, it may not be a good choice now. Although it can be played on some Android phones, it is not widely supported. We expect more mobile phones in the WebM format will be available in the next 1-2 years.

Recommended: MP4 format, 640x480 or 480X360, if you are in trouble. Regardless of the encoding time and storage space, you should select three MP4 encoding schemes: 480 × 360,640 × 480,720 p + "Main profile ")

One or two 3GP formats 320x240 or 176x144) can be used to obtain more detailed Encoding parameters.

About multiple bit rates

Maybe you are considering whether to prepare high-bit-rate videos for users with sufficient bandwidth, and prepare a low-bit-rate video to take care of Small-bandwidth users? If your users have already begun watching HD videos on the Internet, the answer is to cater to these users' habits and user experience. Two or three videos with different bit rates or resolutions can be provided to meet the needs of users using different Internet connection methods. For example, you can select 640x360 and 1280x720. We will discuss this issue more in the future.

Streaming Media Playback

This article does not discuss streaming media, and RTMPFlash, Smooth StreamingSilverlight) and HTTP Live StreamingiOS all require special video formats. This is beyond the scope of our discussion. Relevant articles will be discussed in the future

Conclusion

1. For the minimum HTML5 support, select MP4 + WebM or Ogg, and use Flash to play MP4 to provide backward compatibility support.

2. for mobile devices, H.264/MP4 saves you a lot of effort. If you can provide 2-3 videos with different resolutions and bit rates, the compatibility will be greatly increased.

Suggestions

The following are suggestions for all types of video encoding solutions. Zencoder supports all the encoding format advertisements listed below ...)

1. Only play

HTML5, Flash, and mobile devices: MP4/H.264, encoded with "Baseline", 264x480 or 360x640

HTML5: WebM or Ogg

2. Next floor

HTML5, Flash: MP4/H.264, "High profile" Encoding

 
 

  
  
HTML5：WebM  
  
  
HTML5：Ogg 
 
 

Mobile device: MP4/H.264, "Baseline profile" encoding, resolution: 264 × 480 or 360 × 640

3. I want to support all devices and browsers

HTML5, Flash: MP4/H.264, "High profile" Encoding

 
 

  
  
HTML5： WebM  
  
  
HTML5：Ogg 
 
 

Mobile device: MP4/H.264, "Baseline profile" encoding, resolution 264 × 480 for high compatibility

Mobile Devices: MP4/H.264, "Main profile" encoding, resolution 264 × 1280 to support new devices such as iPhone 4, iPad, and Apple TV)

Mobile Devices: 3GP/MPEG4 with a resolution of 320x240 and) 177X144 to support non-smart phones.

Summary:IOS developmentMediumHTML5How manyEncodingThe content in the format has been introduced. I hope this article will help you!