Insert video into HTML and compatible with all browsers

There are two ways to insert videos into HTML, one is the ancient object tag, and the other is the video tag in html5. The former has relatively better compatibility, while the latter has compatibility that is a headache. 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.

The example is as follows:
The 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 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 = With Theora video encoding and Vorbis audio Encoded Ogg file

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:

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" /> 
<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" /> 
<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 --> 
<param name="expressinstall" value="expressInstall.swf" /> 
</object>

This introduces some files, in addition to videos in flv format, there are also several swf or js files , are all generated using DW software. If you don’t want to study the tag, just go to DW software to generate it. If you can cleverly integrate the two pieces of code

, you can get compatible with all mainstream The ultimate browser code.

So we can do this:

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

<script> 
if($.browser.msie){ 
document.write(&#39;<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1">&#39;+ 
&#39;<param name="movie" value="FLVPlayer_Progressive.swf" />&#39;+ 
&#39;<param name="quality" value="high" />&#39;+ 
&#39;<param name="wmode" value="opaque" />&#39;+ 
&#39;<param name="scale" value="noscale" />&#39;+ 
&#39;<param name="salign" value="lt" />&#39;+ 
&#39;<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" />&#39;+ 
&#39;<param name="swfversion" value="8,0,0,0" />&#39;+ 
&#39;<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->&#39;+ 
&#39;<param name="expressinstall" value="expressInstall.swf" />&#39;+ 
&#39;</object>&#39;); 
}else{ 
document.write(&#39;<video width="602px" height="345px" controls="controls">&#39;+ 
&#39;<source src="public/video/test.mp4" type="video/mp4"></source>&#39;+ 
&#39;<source src="public/video/test.ogg" type="video/ogg"></source>&#39;+ 
&#39;your browser does not support the video tag&#39;+ 
&#39;</video>&#39;); 
} 
</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.

For more related articles about inserting videos into HTML and being compatible with all browsers, please pay attention to the PHP Chinese website!