Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces "online video playback method based on HTML5" in detail, the content is detailed, the steps are clear, and the details are handled properly. I hope this article "online video playback method based on HTML5" can help you solve your doubts.

Misunderstanding of coding and format

Many people mistake the encoding and format for the same thing, and often use the suffix of the video file to determine the degree of support of the video file. In fact, it can be summed up in one sentence: the file suffix of video (assuming there is no malicious modification of the suffix) actually represents an encapsulation format. The coding algorithm of video or audio is not directly related to the encapsulation format itself: the same encapsulation format (that is, the same suffix) can encapsulate video and audio of different coding algorithms. Whether the video playback device or software supports video playback depends not only on the encapsulation format, but also on the coding algorithm. A clear understanding of this is the basis for understanding and troubleshooting problems.

The encapsulation format defines all the content of the video, including image, sound, subtitle, system control and so on, among which image and sound are the most important.

Start with MPEG.

MPEG is an international organization that defines video specifications, and the MPEG-1 and MPEG-2 they once launched are actually known as VCD and DVD, respectively, but these are ancient things. Let's take a look at the MPEG-4 specification related to the topic of this article.

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

Android browser: support for DivX and AVC,Xvid should not be supported

IPhone and iPad (iOS): support DivX and AVC,Xvid not

Chrome: AVC is supported, DivX and Xvid are not supported. Google announced in early 2011 that it would remove AVC (H.264) support from Chrome browsers because of licensing problems. But until the current version, AVC is still supported. In addition, in the actual test, if DivX and AAC are encapsulated in mp4, chrome can play, but only sound (AAC).

Firefox and Opera: still due to licensing problems, Firefox and Opera have gradually shaken their support for AVC. The author tested that AVC can still be played in the latest Firefox (Wikipedia's explanation is that the system itself may have a decoder); as for DivX and Xvid, the author's test results under Firefox are not supported. Judging from Wikipedia's compatibility list, Opera doesn't support AVC well.

IE: the author's IE11 can support AVC, not DivX and Xvid

The advocacy of WebM

Due to the authorization problem of AVC (H.264), the open source camp led by Chrome, Firefox and Opera began to shake their support for AVC. Although these browsers can still support AVC, they also tend to an open source multimedia project called WebM, which includes a new open source video codec scheme called VP8. At present, VP8 has developed to VP9. WebM as an encapsulated format has the suffix of .webm and the MIME type of video/webm. In terms of audio, you can use Vorbis/Opus. In terms of compatibility, the compatibility of Chrome, Firefox, Opera with VP8 is quite ideal, but Safari and IE can hardly support it.

Open source Ogg

Ogg is almost the same as WebM, open source, and is widely supported on open source platforms. Its video coding scheme is called Theora (developed by the VP3, developed by the Xiph.org Foundation and can be used in any encapsulation 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 hardly support it.

Html5 scheme

The main premise of the above discussion is that the video is based on Html5. Now let's summarize the compatibility:

2016218114828002.png (853 × 211)

* IE9 supports VP8 only if the user has installed the codec for VP8.

Classic Google Chrome announced that it would abandon H.264 in 2011, but "it hasn't been realized yet." It can be seen that MP4 (AVC) is still the mainstream now, but in order to solve the wavering of AVC in the "open source camp", we can choose to take advantage of video's multi-source solution to provide additional support for webm or ogg on top of AVC:

XML/HTML Code copies content to the clipboard

This is fallback content

Browsers will choose which format of streaming media files to load according to their preferences. Of course, the server must support multiple formats for the same video. You can do this:

Provide a video version of WebM (VP8+Vorbis)

Provide a video version of MP4 (H.264+AAC (low complexity))

Ogg version is available (Theora+Vorbis)

The server is recommended to use nginx, and try to pay attention to the correct configuration of MIME type.

Older versions of IE and flash

Before html5 became popular, the general video playback solutions were flash and flv (flash supports H.264 mp4 from 9). But with the popularity of ios devices, flash is no longer a panacea, more and more video sites provide multiple solutions, and prefer html5: that is, by testing whether agent supports html5 to decide whether to use video or flash. When faced with browsers below IE8, flash is almost the only choice (silverlight is generally not very popular).

Of course, there are many ways to implement flash and flv. The author can think of the following two ways:

The server outputs different html according to the type of agent, and outputs video+mp4 (avc) and webm (or ogg) if html5 is supported, otherwise output flash-related tags or scripts

With html5shiv and html5-video, IE can also support video tags, and use a Flash player instead of native video playback.

Embed object in video:

XML/HTML Code copies content to the clipboard

Download video as MP4, WebM, or Ogg.

After reading this, the article "online video playback method based on HTML5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.