"Go" method of inserting video into HTML and compatible with all browsers

Original address: http://www.jb51.net/web/168548.html

There are two ways to insert video into HTML, one is an old object tag, one is a video tag in HTML5, the former is relatively better, and the latter is a headache for compatibility.

One of the most common ways to insert video into HTML is the old <object></object> tag, which is the <video></video> tag in HTML5.

The former compatibility does not have to say, but it is not easy to use, the latter is very convenient to use, but the compatibility of people headache.

Although the latter compatibility has a lot of problems, but because the use is very convenient, in line with the trend of future web design development, so we later for the main insert video method, because it compatibility problem, the former as auxiliary.

Examples are as follows:

Copy CodeThe code is 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 types of videos:
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 + video encoding and AAC audio encoding

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

Note: The format must conform to the above three detailed requirements, such as MPEG 4, which must be H + video and AAC audio.

In this case, if the video format is correct, most of the browser compatibility results we are satisfied, but IE678 does not support it, and other people's users in China is still a very large group, we must think of another solution to support them:

Copy CodeThe 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"/>
<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 tag prompts users who use Flash Player 6.0 r65 and later to download the latest version of Flash Player. If you don't want the user to see the prompt, delete it. -
<param name= "Expressinstall" value= "expressinstall.swf"/>
</object>

This introduces some files, in addition to the FLV format of the video, there are several swf or JS files, are generated with the DW software, do not want to study <object></object> tag friends to the DW software generation on the line, if you can skillfully fusion

These two pieces of code will be able to get the ultimate code compatible with all major browsers.

So we can do this:

Using jquery to determine whether the browser is IE (do not judge the specific version of IE, because the server is likely to be the cause of the high version of IE will not pass, ie all with <object></object> tags), according to the version load different tags, the code is as follows:

Copy CodeThe 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 tag prompts users to download the latest version of Flash Player using Flash Player 6.0 r65 and later. If you don't want the user 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 introduce jquery files before writing this code

To this end, you can write HTML video code that is compatible with all browsers.

"Go" method of inserting video into HTML and compatible with all browsers