A brief discussion on the online video playback scheme based on HTML5

This article mainly introduces the online video playback scheme based on HTML5, discusses related issues such as coding and browser support. Friends who need it can refer to it

Now in this special era: Flash is about to die, the historical issues of Microsoft and IE, the html5 standard is uncertain, the dispute between Apple and Google’s closed source and open source, the general trend of the mobile Internet, and the browser’s own battle... These all lead to web developers being quite confused when designing video solutions. This article focuses on this topic to discuss related technologies, principles and tools.

Many people mistake encoding and format for the same thing, and often use the suffix of the video file to uniquely determine the degree of support of the video file. In fact, to summarize it in one sentence, the file suffix of a video (assuming there is no malicious modification of the suffix) actually represents an encapsulation format, while the encoding algorithm of video or audio has no direct relationship with the encapsulation format itself: the same encapsulation format (i.e. the same suffix) can encapsulate video and audio of different encoding algorithms. Whether a video playback device or software supports video playback depends not only on the packaging format, but also on the encoding algorithm. Recognizing this is the basis for understanding and troubleshooting problems.

The encapsulation format specifies all contents of the video, including images, sounds, subtitles, system controls, etc., among which images and sound are the most critical.

MPEG is an international organization that defines the specifications of videos. The MPEG-1 and MPEG-2 they once launched are actually the well-known VCDs and DVDs, but these are all ancient things. Let's take a look at the MPEG-4 specifications related to the topic of this article.

The MPEG-4 specification specifies that the file suffix is ​​named .mp4, and currently includes three image encoding and compression algorithms: Xvid/DivX/AVC (H.264), among which Xvid and DivX can also be collectively called MPEG-4 Part 2 or MPEG-4 Visual, while the more well-known H.264 and AVC are the same concepts. The audio is AAC. The following content about compatibility comes from Wikipedia and format factories and the author's tests:

Android browser: Supports DivX and AVC, Xvid should not support it

iPhone and iPad (iOS): Support DivX and AVC, Xvid does not support

Chrome: Supports AVC, does not support DivX and Xvid. Google announced in early 2011 that it would remove Chrome browser support for AVC (H.264) due to licensing issues. But until the current version, AVC is still being supported. In addition, after actual testing, if DivX and AAC are packaged in mp4, Chrome can play, but only sound (AAC).

Firefox and Opera: Due to the licensing issue, Firefox and Opera gradually waver support for AVC. The author tests AVC in the latest Firefox and can still play (Wikipedia's explanation is that it may be related to the system itself having a decoder); as for DivX and Xvid, the author's test results under Firefox are not supported. Judging from the Wikipedia compatibility list, Opera has poor support for AVC.

IE: The author's IE11 can support AVC, but does not support DivX and Xvid

WebM Advocacy

Due to the licensing issues of AVC (H.264), the open source camp led by Chrome, Firefox, and Opera has begun to shake support for AVC. Although these browsers can still support AVC, they also tend toward an open source multimedia project called WebM, which includes a new open source video encoding and codec solution called VP8. Currently, VP8 has developed to VP9. WebM as encapsulated format has the suffix of .webm and the MIME type of video/webm. In terms of audio, Vorbis/Opus can be used. In terms of compatibility, Chrome, Firefox, and Opera have very ideal compatibility for VP8, but Safari and IE can hardly support it.

Ogg is almost the same as WebM, open source and is widely supported on open source platforms. Its video encoding scheme is called Theora (developed by VP3, developed by the Xiph.org Foundation, and can be used in any package format), and the audio is Vorbis. The suffix is ​​usually .ogv or .ogg, and the MIME type is video/ogg. In terms of compatibility, Chrome, Firefox, and Opera can support it (but Opera cannot support it on mobile platforms), but Safari and IE can hardly support it.

The actual premise of the above discussion is: the video is based on the Html5 <video> solution. Now let's summarize the compatibility:

*IE9 VP8 can only be supported if the user has installed VP8 codec.

‡Google Chrome announced its abandonment of H.264 in 2011, but it has not yet been fulfilled. It can be seen that the mainstream is still MP4 (AVC), but in order to solve the open source camp's sway over AVC, you can choose to use video's multi-source solution to provide additional support for webm or ogg based on AVC: