How to insert video into HTML and be compatible with all browsers

This article mainly introduces the method of inserting video into HTML and is compatible with all browsers. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Insert video into HTML There are two ways to insert videos, one is the ancient object tag, and the other is the video tag in HTML5. The former has relatively better compatibility, while the latter’s compatibility is a headache.

The most commonly used method is to insert into HTML There are two methods of video, 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 a supplement.
The example is as follows:

Copy code

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 = Ogg file with Theora video encoding and Vorbis audio encoding

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

WebM = with VP8 video encoding and Vorbis Audio-encoded WebM files

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 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" /> 
<param name="salign" value="lt" /> 
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&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 There are some files introduced in it. In addition to videos in flv format, there are also several swf or js files, which are all generated with DW software. Friends who don’t want to study the tag can just use DW software to generate them. If You can cleverly combine these two pieces of code
to get the ultimate code that is compatible with all major browsers.
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 uses

Copy code

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="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&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.

The above is the detailed content of How to insert video into HTML and be compatible with all browsers. For more information, please follow other related articles on the PHP Chinese website!