A brief discussion on the online video playback solution based on HTML5_html5 tutorial skills

Now in this special era: Flash is dying, the historical issues of Microsoft and IE, the HTML5 standard is undecided, the closed source and open source disputes between Apple and Google, the general trend of the mobile Internet, and browsers are fighting on their own... This all leads to considerable confusion for web developers when designing video solutions. This article focuses on this topic to discuss related technologies, principles and tools.

Misunderstandings about encoding and format
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 sum it up in one sentence: the file suffix of the video (assuming no malicious modification of the suffix) actually represents an encapsulation format, and the encoding algorithm of the 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 with different encoding algorithms. Whether the 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 packaging format specifies all the content of the video, including images, sounds, subtitles, system controls, etc., among which images and sounds are the most critical.

Starting with MPEG
MPEG is an international organization that defines video specifications. The MPEG-1 and MPEG-2 they once launched are actually the well-known VCD and DVD respectively, but this They are all ancient things. Let's take a look at the MPEG-4 specifications that are relevant to the topic of this article.

The MPEG-4 specification stipulates that the file suffix is ​​.mp4, which currently includes three image encoding and compression algorithms: Visual, while the better known H.264 and AVC are the same concept. For audio, it's AAC. The following content about compatibility comes from Wikipedia and Format Factory as well as the author’s tests:

Android browser: supports DivX and AVC, Xvid should not be supported
iPhone and iPad (iOS): supports DivX and AVC, Xvid is not supported
Chrome: supports AVC, but does not support DivX and Xvid. Google announced in early 2011 that it would remove support for AVC (H.264) from the Chrome browser due to licensing issues. But until the current version, AVC is still supported. In addition, after actual testing, if DivX and AAC are encapsulated in mp4, Chrome can play it, but only the sound (AAC).
Firefox and Opera: Still due to licensing issues, Firefox and Opera have gradually shaken their support for AVC. The author tested AVC in the latest Firefox and can still play it (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. From the Wikipedia compatibility list, Opera does not support AVC well.
IE: The author’s IE11 can support AVC but does not support DivX and AVC support, although these browsers can still support AVC, they also tend to be an open source multimedia project called WebM, which includes a new open source video codec scheme called VP8. Currently VP8 has developed to VP9. WebM as an encapsulated format has the .webm suffix and the video/webm MIME type. For audio, you can use Vorbis/Opus. From a compatibility perspective, Chrome, Firefox, and Opera are very compatible with VP8, but Safari and IE are almost unable to support it.

Open source Ogg

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 from VP3, developed by the Xiph.org Foundation, and can be used in any packaging format), and its 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 are almost unable to support it.

Html5 solution

The actual main premise of the above discussion is that the video is based on Html5's
*IE9 supports VP8 "only when the user has installed the VP8 codec".

‡Google Chrome announced in 2011 that it would abandon H.264, but "it has not yet materialized." It can be seen that the current mainstream is still MP4 (AVC), but in order to solve the "open source camp"'s uncertainty about AVC, you can choose to use the multi-source solution of video to provide additional support for webm or ogg on the basis of AVC:

XML/HTML Code

Copy content to clipboard

1. video poster="movie.jpg" controls>  
2.   source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>  
3.   source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>  
4.   source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>  
5.   p>This is fallback contentp>  
6. video>  

浏览器会根据自己的偏好来选择具体加载那种格式的流媒体文件，当然服务端必须对同一个视频提供多种格式的支持，具体可以这么做：

提供一个WebM的视频版本（VP8 Vorbis）
提供一个MP4的视频版本（H.264 AAC(low complexity)）
提供Ogg版本（Theora Vorbis）
服务端推荐使用nginx，尽量注意MIME类型的配置正确

旧版本的IE和flash
在html5流行之前，通用的视频播放解决方案是flash和flv（flash从9开始支持h.264的mp4）。但是随着ios设备的流行，flash已经不是万能药了，越来越多的视频网站提供多元的解决方案，而且偏向于html5：也就是说，通过检测agent是否支持html5来决定使用video还是flash。在面对IE8以下的浏览器时，flash几乎是唯一的选择(silverlight的接受度普遍不高)。

当然针对flash和flv的方案，也有多种实现方法，笔者能够想到的有如下两种：

服务端根据agent的类型，输出不同的html，如果支持html5就输出video mp4(avc)和webm（或者ogg），否则输出flash相关的标签或脚本
使用html5shiv和html5-video是IE也能够支持video标签，并且使用Flash播放器来代替原生的video播放。
将object内嵌在video中：

XML/HTML Code复制内容到剪贴板

1. video id="movie" width="320" height="240" preload controls>  
2.   source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />  
3.   source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />  
4.   source src="pr6.mp4" />  
5.   object width="320" height="240" type="application/x-shockwave-flash"  
6.     data="flowplayer-3.2.1.swf">  
7.     param name="movie" value="flowplayer-3.2.1.swf" />  
8.     param name="allowfullscreen" value="true" />  
9.     param name="flashvars" value="config={'clip': {'url': 'http://wearehugh.com/dih5/pr6.mp4', 'autoPlay':false, 'autoBuffering':true}}" />  
10.     p>Download video as a href="pr6.mp4">MP4a>, a href="pr6.webm">WebMa>, or a href="pr6.ogv">Ogga>.p>  
11.   object>  
12. video>