How to insert video into HTML and be compatible with all browsers_HTML/Xhtml_Web page production

There are two most commonly used methods of inserting videos into HTML, one is the ancient tag, and the other is the tag in HTML5.

The former has compatibility, but it is not very convenient to use. The latter is very convenient to use, but the compatibility is a headache.

Although there are many problems with the compatibility of the latter, because it is very convenient to use and conforms to the development trend of future web design, we use the latter as the main method of inserting videos. Because of its compatibility issues, the former is used as Auxiliary.

An example is as follows:

Copy the code

The code is as follows:

Currently, the video element supports three video formats:
Format IE Firefox Opera Chrome Safari
Ogg No 3.5 10.5 5.0 No
MPEG 4 9.0 No No 5.0 3.0
WebM No 4.0 10.6 6.0 No

Ogg = Ogg file with Theora video encoding and Vorbis audio encoding

MPEG4 = MPEG 4 file with H.264 video encoding and AAC audio encoding

WebM = WebM file with VP8 video encoding and Vorbis audio encoding

Note: The format must comply with the above three detailed requirements, such as MPEG 4, which must be H.264 video and AAC audio.

In this case, if the video format is correct, we are quite satisfied with the compatibility results of most browsers, but IE678 does not support it, and their users are still a very large group in China. We You must think of another solution to support them:

Copy the code

The code is as follows:

Some files are introduced here, except Videos in flv format, as well as several swf or js files, are all generated with DW software. Friends who don’t want to study the tag can just go to DW software to generate them. If they can be combined cleverly

With these two pieces of code, you can get the final code that is compatible with all major browsers.

So we can do this:

Use jquery to determine whether the browser is IE (you don’t need to determine the specific IE version, because IE may not pass higher versions due to server reasons, for the time being, use < for all IE ;object> tag), load different tags according to the version, the code is as follows:

Copy code

The code is as follows:

<script> <br>if($.browser.msie){ <br>document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width= "624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1">' <br>'<param name="movie" value="FLVPlayer_Progressive .swf" />' <br>'<param name="quality" value="high" />' <br>'<param name="wmode" value="opaque" />' <br>'<param name="scale" value="noscale" />' <br>'<param name="salign" value="lt" />' <br>'<param name= "FlashVars" value="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&autoRewind=false" />' <br>'<param name=" swfversion" value="8,0,0,0" />' <br>'<!-- This param tag prompts users using Flash Player 6.0 r65 and higher to download the latest version of Flash Player. If you If you do not want users to see this prompt, please delete it. -->' <br>'<param name="expressinstall" value="expressInstall.swf" />' <br>'</object> '); <br>}else{ <br>document.write('<video width="602px" height="345px" controls="controls">' <br>'<source src="public/ video/test.mp4" type="video/mp4"></source>' <br>'<source src="public/video/test.ogg" type="video/ogg">< /source>' <br>'your browser does not support the video tag' <br>'</video>'); <br>} <br></script>

Don’t forget to introduce the jquery file

before writing this code. At this point, you can write HTML video code that is compatible with all browsers.