Today, let's share the "HTML front-end tutorial - video insertion methods compatible with each browser "This article, based on the detailed introduction of example coding, may have a certain reference space and use value for everyone's programming road. Friends in need will learn from Yunnan Qianlong Mark next. There are two methods to insert videos into HTML, one is the ancient object tag, and the other is the video tag in html5. The former has better compatibility, and the latter has better compatibility Head pain

There are two most commonly used methods to insert video into HTML, one is the ancient < Object > < / Object > tag, and the other is the < video > < / video > tag in html5.

The compatibility of the former goes without saying, 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 in the compatibility of the latter, due to its convenient use and in line with the development trend of web design in the future, we use the latter as the main method of inserting video, and the former as an auxiliary because of its compatibility.

Examples are as follows:

<video width="602px" height="345px" controls="controls">

<source src="public/video/test.mp4" type="video/mp4"></source>

<source src="public/video/test.ogg" type="video/ogg"></source>

your browser does not support the video tag

</video>

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 meet 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 satisfied with the compatibility results of most browsers, but IE678 does not support it, and people's users are still a very large group in China, so we must think of another solution to support them:

Copy code

The code is as follows:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1">

<param name="movie" value="FLVPlayer_Progressive.swf" />

<param name="quality" value="high" />

<param name="wmode" value="opaque" />

<param name="scale" value="noscale" />

<p> http://www.qlyl1688.com </p>

<param name="salign" value="lt" />

<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=public/swf/Clear_Skin_3&amp;streamName=public/video/test&amp;autoPlay=false&amp;autoRewind=false" />

<param name="swfversion" value="8,0,0,0" />

<!-- this param Use of label tips Flash Player 6.0 r65 And later users download the latest version Flash Player. If you don't want users to see the prompt, delete it. -->

<param name="expressinstall" value="expressInstall.swf" />

</object>

Some files are introduced here. In addition to the video in flv format, there are several swf or js files, which are generated by DW software. Friends who don't want to study labels can generate them by DW software. If they can be skillfully integrated

These two pieces of code can get the ultimate code compatible with all mainstream browsers.

So we can:

Use jquery to judge whether the browser is IE (no need to judge the specific IE version. Because of the server, IE may not pass the higher version. For the time being, all IE use tags). Load different tags according to the version. The code is as follows:

Copy code

The code is as follows:

<script>

if($.browser.msie){

document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1">'+

'<param name="movie" value="FLVPlayer_Progressive.swf" />'+

'<param name="quality" value="high" />'+

'<param name="wmode" value="opaque" />'+

'<param name="scale" value="noscale" />'+

'<param name="salign" value="lt" />'+

'<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=public/swf/Clear_Skin_3&amp;streamName=public/video/test&amp;autoPlay=false&amp;autoRewind=false" />'+

'<param name="swfversion" value="8,0,0,0" />'+

'<!-- this param Use of label tips Flash Player 6.0 r65 And later users download the latest version Flash Player. If you don't want users to see the prompt, delete it. -->'+

'<param name="expressinstall" value="expressInstall.swf" />'+

'</object>');

}else{

document.write('<video width="602px" height="345px" controls="controls">'+

'<source src="public/video/test.mp4" type="video/mp4"></source>'+

'<source src="public/video/test.ogg" type="video/ogg"></source>'+

'your browser does not support the video tag'+

'</video>');

}

</script>

Don't forget to import the jquery file before writing this code

So far, you can write HTML video code that is compatible with all browsers. The above is all the content introduced by Yunnan Qianlong Mark. I hope it will be helpful to you. If you have any questions, please leave a message at the script home. If you think this article is helpful to you, welcome to reprint it. Please indicate the source, thank you!