Insert video into HTML, compatible with all browsers

The most common method for inserting videos into HTML is either the old one.<Object> </object>Tag, one is in html5<Video> </video>Label.

The compatibility of the former has nothing to say, 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 latter's compatibility, it is easy to use and will meet the future development trend of Webpage Design. Therefore, we will focus on video insertion because of its compatibility problems, the former serves as an aid.

Example:

<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 files with H.264 video encoding and AAC audio encoding

WebM = A WebM file with VP8 video encoding and Vorbis Audio Encoding

Note: The format must comply with the preceding 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 other users are still very large in China, we have to think of another solution to support them:

<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"/>
<! -- This param label prompts you to use Flash Player 6.0 r65 and later to download the latest Flash Player. If you do not want the user to see this prompt, delete it. -->
<Param name = "expressinstall" value = "expressInstall.swf"/>

</Object>

Some files are introduced here. Apart from flv videos, several swf or js files are generated by DW software, if you do not want to study the <object> </object> label, you can generate the <object> </object> label using DW software.

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

So we can:

Use jquery to determine whether the browser is IE (no need to judge the specific IE version, because the server causes IE to be able to pass the higher version, and IE uses the <object> </object> label for the moment ), load different labels by version. 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"/>' +
'<! -- This param label prompts you to use Flash Player 6.0 r65 and later to download the latest Flash Player. If you do not want the user to see this 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 the jquery file before writing this code.

So far, you can write HTML video code compatible with all browsers.