Insert video into HTML and be browser compatible

This article mainly introduces the style of CSS custom green check box button, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

Insert video into HTML There are two methods, 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.

The most commonly used method of inserting videos into HTML There are two methods, 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.
Examples are as follows:

<video> 
<source></source> 
<source></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 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, so we must think of Another solution supports them:

<object> 
<param> 
<param> 
<param> 
<param> 
<param> 
<param> 
<param> 
<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 --> 
<param> 
</object>

Some files are introduced here. In addition to videos in flv format, there are also several swf or js files, all generated with DW software. I don’t want to study tag, just go to DW software to generate it. If you can cleverly fuse the
two pieces of code, you can get the ultimate code that is compatible with all mainstream 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

<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;&#39;); 
}else{ 
document.write(&#39;<video width="602px" height="345px" controls="controls">&#39;+ 
&#39;<source src="public/video/test.mp4" type="video/mp4">&#39;+ 
&#39;<source src="public/video/test.ogg" type="video/ogg">&#39;+ 
&#39;your browser does not support the video tag&#39;+ 
&#39;&#39;); 
} 
</script>

Don’t forget to introduce the jquery file before writing this code
At this point, you can write an HTML video that is compatible with all browsers code.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

html5 implements analysis of players compatible with major browsers

About H5 new attributes audio audio and video Video control analysis

How to realize the automatic playback of HTML5 page audio and video under WeChat and app

The above is the detailed content of Insert video into HTML and be browser compatible. For more information, please follow other related articles on the PHP Chinese website!